Lauiui での iconfont の使い方の紹介

layui のアイコンは、Alibaba のベクター アイコン ライブラリ Iconfont から取得されており、同様に、このチュートリアルも Iconfont に基づいて拡張されています。

最初のステップは、ブラウザで http://iconfont.cn/ を開き、Alibaba ベクター アイコン ライブラリにアクセスすることです。

2 番目のステップは、右上隅のユーザー アイコンを使用してアカウントへのログインを承認することです。ここでは、ログイン アカウントとして Github を使用することを選択します。

3 番目のステップでは、ログインが完了したら、基本的な操作について少し理解しましょう。

Iconfont は、公式アイコン リソースや一部のサードパーティ素材を含む、多くのアイコン ライブラリを提供します。さまざまな選択方法があり、いくつかのカラフルなアイコンをプロジェクトに組み込むことができますが、ここでは「カラフルなアイコン ライブラリ」の「マルチカラー金融ビジネス アイコン」を選択します。

パネルの操作により、さまざまなアイコンを簡単に収集・ダウンロードしたり、「ショッピングカートに追加」などのプロジェクトにアイコンを追加したりすることもできます。

閲覧したアイコンをすべてショッピングカートに入れてプロジェクトを作成します。

4 番目のステップでは、プロジェクトを追加した後、プロジェクトの管理と操作に慣れてみましょう

プロジェクト情報を設定し、アイコンの FontClass プレフィックスを「layui-extend-」に変更します。 "

これは、変更して保存した後のレンダリングです。

#5 番目のステップは、統合方法を選択することです。

Iconfont には、オンライン CDN リソースを生成して統合する 2 つの統合方法があり、メンテナンスが非常に便利であるという利点があります。プロジェクトには変更されない一意のアドレスがあり、ウェアハウスが更新された後は直接参照できるようになり、更新の問題は無視されます。もう 1 つの方法は、ローカル統合にダウンロードすることです。これには、プロジェクト全体の整合性が確保され、さまざまなバージョンが保持されるという利点があります。

[ローカルにダウンロード] ボタンをクリックすると、ZIP パッケージが届きました。 lauiui公式サイトから最新版のフレームワークをダウンロードし、解凍後、同じディレクトリに配置します。

6 番目の手順では、layui ディレクトリの css/modules の下に、layui-icon-extend という名前の新しいディレクトリを作成し、フォント ディレクトリの iconfont で始まるファイルをそこにコピーします。

ステップ 7、コードの作成を開始します。 ！ ！

ページ参照のlayui-icon-extendの下にあるiconfont.cssファイルを引用すると、「iconfontlayui-extend-xxxx」を使用してアイコンを参照できます。

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1553749761811'); /* IE9 */
  src: url('iconfont.eot?t=1553749761811#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPcAAsAAAAACAAAAAOPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqEBINEATYCJAMICwYABCAFhG0HNRvvBhEVnOnIfhS4sRt8yq+yZN7K03rKOQgeeDvr/UHwJ1pMFmJ1lMvkoIUumZNUihXZXcUECIhbnPNI6jrqciRnTx5926UDzjISRlzIC/n/OWa6FM8PNJfsoL0BjlsH2HEdwncgB+b3GBto93MeApAkKyQ6dOoxAAcaxjQBiBlTJ4/FkZKj1aQKHAhsJWs1RD06DmWNcgeo839ffKM8ByjoKkZGn0kdJ9Dmo25GqIH/ASNcBIzxtAC3CVSgEGggBpTqe6GG/kIqUvFrpGNdqQI+6v//u/TV/uOBAGHDSHYBkIj0c2LYzFMtUADQOPf+s8DTXt8JutvlWuaZXJVliY1X116ODZj7BhtVVjAs5dp1gdDwJ08GPH068Pnzwc+ejVx70D+o24YkQk8GRPvT82JEMKHLgHX7ZTi4L2awZR0gwn4ZPiisqg2mUWWKYIxsrRHhvcELVB2AkGlsytkbH9wUkx+2zJZGaysUnRvawPrMPXGGNdB+h4xQYHc0gf1ShsAyDGtTlZnKiJbrohkYMq2cPYFhe++ksm4td/CLnff+HUmv2hblmthsoitqW5WcWyzvRN2RbkZqyhXt92/tiklBqsOO90g46U13m0c37xetszOm9IpNTbUp/jWzW6ef32wedad768020n9Gbzcgz+esH/Gg3CPNaJhja6u48j3edM8w2cbcDgjvvbfH7iwotLtv7/nn/1x4IPPAwpeD/+257bYXFuyM3S6HeYeh4RxPvktpaxtRH21KT/kDyHL6BuS10/1n8MHvPMdv5beOSRzQxmzjTxxots6/RRsA/t9Ur6pt/uff4Jobc2y0t8Uvh6EB8OLmEkGs/29qtDOC464NAv4eo2WdprIMhaLJjNKwwln0t1IikcB/qDnSy75GE7FW4OAZCAp2kkDFQSZSwxaCjkEl2HDQGiQFOm82iDIPFaE5gXwrAAQ+x0DBwzVQ8RF8kRPsD6aO/jBzaAwrn6L2XDsVrtoTCkYPZA+hyjNtqXgVpD7QrxNBSZaP+yBVoQtsw8qG7pghjbGganyHWYOmPIUbXAyTJIeC8ggVGwFz4ZqmLnsjQ+XpYOWMIIEhD5B6IKTkMtptzla5n39AvlpCoJqaCvkHIpVwcGAzWC2Qd37WquZaHlJp+ByMaUAjuRS4gRYlpj8HivJREaQwQ9DDW3CZpJFuyzfmF6ZPtwWQDImSOURlfY1dKLKjlw0GAA==') format('woff2'),
  url('iconfont.woff?t=1553749761811') format('woff'),
  url('iconfont.ttf?t=1553749761811') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1553749761811#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.layui-extend-quexianicon:before {
  content: "\e605";
}

上記のスタイルでは、iconfont は iconfont.css 内のスタイル名を参照します。

競合を避けるため、通常、変更は推奨されません。もちろん、iconfont でさらに多くのプロジェクトを参照する場合は、それを変更することもできます。

注:layui-icon に変更しないでください。layui に付属のアイコンと競合します。 ！

layui の詳細については、

layui 使用法チュートリアル 列に注目してください。

以上がLauiui での iconfont の使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。