ベクターフォントを使用してアプレットアイコンコンポーネントアイコンをカスタマイズする-ミニプログラム開発-php.cn

ベクターフォントを使用してアプレットアイコンコンポーネントアイコンをカスタマイズする

coldplay.xixi

リリース： 2020-11-18 17:21:22

転載

3894 人が閲覧しました

ミニプログラム開発チュートリアル列では、ミニプログラムアイコンコンポーネントアイコンをカスタマイズする方法を紹介します。

ベクターフォントを使用してアプレットアイコンコンポーネントアイコンをカスタマイズする

質問

WeChat アプレットのアイコンコンポーネントには、success、success_no_circle、info、warn、waiting、cancel、download、search の 9 種類しかありません。、クリア。詳細については、アイコンコンポーネントの公式ドキュメントを参照してください。

アイデア

私たちは、上記の 9 つのアイコンに制限されずに、アイコンコンポーネントのアイコンを拡張したいと考えることがよくあります。これには、アイコンをカスタマイズする方法が含まれます。アイコンをカスタマイズするには、画像、スプライト、CSS スタイルの描画、SVG ベクターファイルなどを使用するなど、さまざまな方法があります。この記事では、ベクターフォントを使用してアプレットのアイコンコンポーネントのアイコンをカスタマイズする方法に焦点を当てます。

コンセプト

ベクターフォントとは何ですか?

フォントには、ビットマップフォントとベクターフォントが含まれます。ベクターフォントは現在広く使用されており、Adobe の Type1、Apple と Microsoft が主導する TrueType、および Adobe、Apple、Microsoft が共同主導するオープンソースフォントである OpenType の 3 つのカテゴリに分類されます。ベクトルフォントの場合、各 Unicode はエンコーディングインデックスであり、各文字の記述情報は幾何学的ベクトル描画記述情報です。ベクターフォントはリアルタイムで描画されるため、リアルタイムで任意の色で塗りつぶし、エイリアスを発生させることなく無限に拡大縮小できます。

ベクターフォントを使用するには、非常に便利な Web サイト、Iconfont-Alibaba Vector Icon Library を参照する必要があります。この Web サイトでは、アイコンのダウンロードだけでなく、カスタムベクターアイコンの生成とダウンロードも提供します。次に、豊富なスクリーンショットを組み合わせて、ベクターフォントを使用してアプレットアイコンコンポーネントアイコンをカスタマイズする方法を段階的に見ていきます。

実践方法

ベクターアイコンを入手する

Iconfont-Alibaba ベクターアイコンライブラリ Web サイトを開きます。そのホームページは次のとおりです。ここでは、アイコンがどのように見えるかは気にしません。ベクターアイコンの生成から WeChat アプレットコードまで、アイコンコンポーネントのアイコンを段階的にカスタマイズする方法だけを気にします。そこで、以下に示すように、最初のアイコンコレクションを直接選択してクリックします。

次に、最初のアイコンライブラリをクリックします。詳細は次のとおりです。ここでは、3 番目のアイコン (コーヒー豆のアイコン) にマウスを置くと、ショッピングカートに追加、お気に入り、ダウンロードの 3 つのボタンが表示されます。「カートに追加」ボタンをクリックする必要があります。

このとき、右上のショッピングに赤いコーナーマークが表示されますので、右上のボタンをクリックすると以下の画面が表示されます。

次に、[プロジェクトに追加] ボタンをクリックすると、次のインターフェイスが表示されます。プロジェクトがない場合は新規作成し、プロジェクトがある場合は適切と思われるインターフェイスを選択してください。ここでは、事前に新しいテストプロジェクトを作成し、そのテストプロジェクトを直接選択しました。

プロジェクトを追加すると、Web ページは自動的にプロジェクトの詳細インターフェイスにジャンプします。このインターフェイスには、追加したばかりのアイコンが含まれています。

この時点で、中央の [オンラインリンクを表示] ボタンをクリックすると、一連のコードが生成され、Web ページの中央に表示されます。この時点で、iconfont.cn でのタスクは完了し、必要なアイコンのリモートリンクと Unicode 値を取得しました。生成されたコードはアイコンのリモートリンクであり、コーヒー豆アイコンの下にある 

という単語はアイコンに対応する Unicode 値です。これら 2 つのコンテンツは、以下の WeChat アプレットコードを記述するときに使用されます。

WeChat アプレットのコードの作成

WeChat アプレットのコードの作成は比較的簡単です。まず、WXSS ファイルを作成し、取得したリモートフォントをリンクします。それを WXSS に直接書き込み、カスタムアイコンフォントスタイルを記述し、最後にアイコンコンポーネントでそれを参照します。コードは次のとおりです:

WXSS コード

iconfont にコピーされたフォントフェイスコードは、WXSS に直接貼り付けられることに注意してください。コーヒー豆の画像の Unicode  先ほどのを \ に変換し、icon-coffee の内容に入れます。

@font-face {  font-family: 'iconfont';  /* project id 1834535 */
  src: url('//at.alicdn.com/t/font_1834535_c5751gpcjt.eot');  src: url('//at.alicdn.com/t/font_1834535_c5751gpcjt.eot?#iefix') format('embedded-opentype'),  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.woff2') format('woff2'),  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.woff') format('woff'),  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.ttf') format('truetype'),  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.svg#iconfont') format('svg');
}.iconfont {  font-family: "iconfont" !important;  font-size: 16px;  font-style: normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;
}.icon-coffee:before {  content: "\e634";  color: darkgoldenrod;  font-size: 70px;
}复制代码

ログイン後にコピー