Alibaba ベクターアイコンライブラリにアクセス Alibaba ベクターアイコンライブラリ
1. ユニコード これがこの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 { /*これはコピーされたアイコンコードを次の形式に変更したものです*/ /* 内容: ""; */ 内容: "\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 の使用法とデモンストレーション
1. はじめにこれまで、テキストの特定の部分を強調したい場合、通常は太字にしたり明るい色を使用したり...
1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...
1. MySQLイメージを取得するターミナルから最新のMySQLイメージを取得するdocker pu...
1. ダウンロードしたファイルを以下のように解凍します。 。 2. 環境変数に解凍ディレクトリを追加...
目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...
デフォルトでは、表のタイトルは水平方向に中央揃えされます。ALIGN 属性を使用して、タイトル テキ...
目次Vueルーティング相対パスジャンプ1. 属性の追加2.router.resolveメソッドVue...
境界範囲間のmysql間の範囲は両側の境界値を含む例: 3 から 7 までの id は、id >...
序文同社の開発者は、データの更新時に replace into ステートメントを使用していました。不...
序文MySQL 8.0 より前は、Oracle、SQL SERVER、PostgreSQL などの他...
4つの実用的なVueカスタム指示1. Vドラッグ要件: マウスドラッグ要素アイデア:要素のオフセット...
目次1. スコープはさまざまな方法で表現されます2. 変動昇進と非昇進の違い3. 一時的なデッドゾー...
効果 html <本文> <div class="content&quo...
目次1. axioの基本的な使い方2. クロスドメインの問題を解決するには? 3. パッケージ4. ...
目次1. 挿入2. 更新3. 削除1. 挿入 顧客に挿入( 顧客.顧客住所、 顧客.cust_cit...