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 の使用法とデモンストレーション
2020 年 4 月 23 日、本日、Windows 上の Ubuntu 20.04 では、Ubun...
CSS3 の 3D 効果を使用して立方体を作成する方法を学ぶと、3D シーンの回転と変位のプロパティ...
目次要約する <テンプレート> <div> 要素 <h2>{{メ...
序文この記事では主にMySQLのカスタム関数とストアドプロシージャに関する関連コンテンツを紹介し、皆...
URL: http://hostname.com/contextPath/servletPath/p...
退屈していたので、突然角丸四角形の実装を思いつきました。しかし、私たちはこの話題についてあまりにも長...
1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...
イメージをプルします: [mall@VM_0_7_centos ~]$ sudo docker pu...
1.アルパインイメージをダウンロードする [root@docker43 ~]# docker pul...
この記事では、参考までに、Vue+Vant のトップ検索バーを実装するための具体的なコードを紹介しま...
序文var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変...
シナリオssh 経由で Ubuntu サーバーに接続するには、xshell ツールを使用する必要があ...
目次序文やることリストやるだけ地図を準備するインスタンスをバックアップ用に保存するタイマーカルーセル...
序文システム領域の使用量が大きすぎて消去する必要がある場合、または特定のファイルを消去する必要がある...
質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...