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

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 の使用法とデモンストレーション

推薦する

Windows 10 で Ubuntu 20.04 LTS をアップデートする方法

2020 年 4 月 23 日、本日、Windows 上の Ubuntu 20.04 では、Ubun...

CSS3の3D効果を使って立方体を作成する

CSS3 の 3D 効果を使用して立方体を作成する方法を学ぶと、3D シーンの回転と変位のプロパティ...

Vueコンポーネントのカスタムイベントの詳細な説明

目次要約する <テンプレート> <div> 要素 <h2>{{メ...

MySQLカスタム関数とストアドプロシージャの詳細な説明

序文この記事では主にMySQLのカスタム関数とストアドプロシージャに関する関連コンテンツを紹介し、皆...

角丸四角形の HTML+CSS 実装コード

退屈していたので、突然角丸四角形の実装を思いつきました。しかし、私たちはこの話題についてあまりにも長...

Apache SkyWalkingのセルフモニタリングを素早く有効にする方法を説明します

1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...

Dockerはrabbitmqのサンプルコードをインストールして実行します

イメージをプルします: [mall@VM_0_7_centos ~]$ sudo docker pu...

alpineをベースにdockerfileで作成したtomcatイメージの実装

1.アルパインイメージをダウンロードする [root@docker43 ~]# docker pul...

Vue+Vantはトップ検索バーを実装します

この記事では、参考までに、Vue+Vant のトップ検索バーを実装するための具体的なコードを紹介しま...

forループ内のvarの問題の解決

序文var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変...

Ubuntuはポート22を開きます

シナリオssh 経由で Ubuntu サーバーに接続するには、xshell ツールを使用する必要があ...

echartsマップカルーセルハイライトを解決するための記事

目次序文やることリストやるだけ地図を準備するインスタンスをバックアップ用に保存するタイマーカルーセル...

Linuxファイル削除後にスペースが解放されない問題の詳しい説明

序文システム領域の使用量が大きすぎて消去する必要がある場合、または特定のファイルを消去する必要がある...

MySQL の乗算と除算の精度の不一致の問題 (除算後の小数点以下 4 桁)

質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...