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

推薦する

CSS テキスト強調を使用してテキストを強調するための実装コード

1. はじめにこれまで、テキストの特定の部分を強調したい場合、通常は太字にしたり明るい色を使用したり...

Linux でファイルをあいまい検索するのに適したコマンドは何ですか?

1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...

MacOS で Docker を使用して MySQL マスター スレーブ データベースを作成する方法

1. MySQLイメージを取得するターミナルから最新のMySQLイメージを取得するdocker pu...

MySql 8.0.16-win64 インストール チュートリアル

1. ダウンロードしたファイルを以下のように解凍します。 。 2. 環境変数に解凍ディレクトリを追加...

JavaScript は詳細なコードで星座クエリ機能を実装します

目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...

HTML テーブル マークアップ チュートリアル (16): タイトルの水平方向の配置属性 ALIGN

デフォルトでは、表のタイトルは水平方向に中央揃えされます。ALIGN 属性を使用して、タイトル テキ...

Vueルーティング相対パスジャンプメソッド

目次Vueルーティング相対パスジャンプ1. 属性の追加2.router.resolveメソッドVue...

MySQL における between の境界と範囲の説明

境界範囲間のmysql間の範囲は両側の境界値を含む例: 3 から 7 までの id は、id >...

MySQL で置換操作を使用したときにデータ損失が発生する問題の解決策

序文同社の開発者は、データの更新時に replace into ステートメントを使用していました。不...

MySQL 8.0 ウィンドウ関数の紹介と概要

序文MySQL 8.0 より前は、Oracle、SQL SERVER、PostgreSQL などの他...

Vue の 4 つのカスタム命令の説明と使用例

4つの実用的なVueカスタム指示1. Vドラッグ要件: マウスドラッグ要素アイデア:要素のオフセット...

JavaScript における var と let の違い

目次1. スコープはさまざまな方法で表現されます2. 変動昇進と非昇進の違い3. 一時的なデッドゾー...

vue3 学習ノートにおける axios の使用の変更の概要

目次1. axioの基本的な使い方2. クロスドメインの問題を解決するには? 3. パッケージ4. ...

MySQLデータの挿入、更新、削除の詳細

目次1. 挿入2. 更新3. 削除1. 挿入 顧客に挿入( 顧客.顧客住所、 顧客.cust_cit...