CSS は Alibaba ベクターライブラリを使用して、対応する位置に見栄えの良いアイコン効果をすばやく追加します (サンプルコード)

Alibaba ベクターアイコンライブラリにアクセス

Alibaba ベクターアイコンライブラリ

好きなアイコンを選択し、「ライブラリに追加」をクリックします。
選択後、右上隅のショッピングカートアイコンをクリックします（ログインしていることを前提としていますが、GitHubを使用してログインすることをお勧めします）。
次に、右側の「プロジェクトに追加」をクリックします。
後で個人のホームページで見ることができます

1. ユニコード
2.フォントクラス

これがこの2つの用途です

ユニコード

入力を開始すると、コードが自動的に生成されます。生成されない場合は、「生成」をクリックします。例:

@フォントフェイス {
  font-family: 'iconfont'; /* プロジェクト ID 1743720 */
  出典: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
  ソース: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') フォーマット('embedded-opentype'),
  url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') フォーマット('woff2'),
  url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff') フォーマット('woff'),
  url('//at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') フォーマット('truetype'),
  url('//at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') フォーマット('svg');
}

最も重要なのはアイコンフォントです

同時に、対応するURLパスも変更する必要があります。

最初の例を見てみましょう

<!--元のURL-->
出典: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
<!-- URL を変更したら、ブラウザを開いて対応する URL にアクセスします。eot ファイルをダウンロードするように求められたら、変更は成功です -->
出典: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');

Unicodeのアイコンの参照は次のとおりです。

先ほどの個人ページで、Unicodeを選択すると、追加されたアイコンがすべて下に表示されます。検索を例に挙げます。

ここに画像の説明を挿入

マウスを上に動かすと、コードをコピーするためのアイコンが表示されます。コピーをクリックします。

以下はサンプルコードです

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>アイコンの使用</title>
    <スタイル>
        @フォントフェイス {
            font-family: 'iconfont'; /* プロジェクト ID 1743720 */
            出典: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
            ソース: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') フォーマット('embedded-opentype'),
            url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') フォーマット('woff2'),
            url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff') フォーマット('woff'),
            url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') フォーマット('truetype'),
            url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') フォーマット('svg');
        }

        .ラッパー{
            幅: 1090ピクセル;
            高さ: 300px;
            背景色: アンティークホワイト;
            マージン: 0px 自動;
            テキスト配置: 中央;
        }

        .iconTest::before {
        	/*これはコピーされたアイコンコードを次の形式に変更したものです*/
            /* 内容: "&#xe61a;"; */
            内容: "\e61a";
            フォントファミリ: "アイコンフォント";
        }
    </スタイル>
</head>
<本文>
    <div class="コンテナ">
        <div class="wrapper">
            <span class="iconTest"> : こんにちは CSS</span>
        </div>
    </div>
</本文>
</html>

レンダリング

ここに画像の説明を挿入

###フォントクラスのアイコンへの参照

これはずっと簡単になります。

アイコンライブラリの個人ホームページの Unicode の横に Fonte Class があります。それをクリックして、任意のアイコンを選択し、コードをコピーします。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>アイコンの使用</title>
    <!-- CSS リソースをインポートして使用し、URL に https:// を追加します -->
    <link rel="スタイルシート" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
    <スタイル>
        .ラッパー{
            幅: 1090ピクセル;
            高さ: 300px;
            背景色: アンティークホワイト;
            マージン: 0px 自動;
            テキスト配置: 中央;
        }
    </スタイル>
</head>
<本文>
    <div class="コンテナ">
        <div class="wrapper">
        	<!--iconfont はこれがアイコン スタイルであることを示します -->
        	<!--icon-sousuot は検索アイコンであることを意味します-->
            <span class="iconfont icon-sousuo"></span><span> : こんにちは CSS</span>
        </div>
    </div>
</本文>
</html>

使いやすい

複雑な Web ページには、さまざまなアイコンへの参照が含まれる場合があります。たとえば、ナビゲーションバーの各列の前にアイコンが必要です。ここで ::before が使用されます。同様に、アイコンを参照するために span が使用される場合もあります。このとき、Font-Class での使用方法を導入して、2 つのシナリオでの使用を実現できます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>アイコンの使用</title>
    <link rel="スタイルシート" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
    <スタイル>
        .ラッパー{
            幅: 1090ピクセル;
            高さ: 300px;
            背景色: アンティークホワイト;
            マージン: 0px 自動;
            テキスト配置: 中央;
        }

        .iconTest::after {
            内容: "\e61a";
            フォントファミリ: "アイコンフォント";
        }
    </スタイル>
</head>
<本文>
    <div class="コンテナ">
        <div class="wrapper">
            <span class="iconfont icon-sousuo"></span><span class="iconTest"> : こんにちは CSS</span>
        </div>
    </div>
</本文>
</html>

その結果、Hello CSSの前後に検索アイコンが表示されるようになりました。

理由: インポートした CSS を開くと、Unicode も含まれていることがわかります。したがって、後で使用するために Font-Class を導入するだけで済みます。アイコンに対応する 16 進コードは Unicode でコピーされますが、これもちょっとしたトリックです。

要約する

これで、CSS で Alibaba ベクターライブラリを使用して、対応する位置に見栄えの良いアイコン効果 (サンプルコード) をすばやく追加する方法についての記事は終了です。CSS Alibaba ベクターアイコンライブラリの関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: Dockerfile を使用したカスタムイメージの構築の実装

>>: Vue での ref の使用法とデモンストレーション