1. アイコンファイルをダウンロードする
Alibaba アイコン ライブラリの場所: iconfont-Alibaba ベクトル アイコン ライブラリ
例: 「ブックマーク」アイコンを検索し、クリックしてショッピング カートに追加し、ショッピング カートに入り、追加する項目を入力するか、直接ダウンロードして、クリックして編集します
エディターは画像の色やピクセル サイズなどを設定し、クリックしてダウンロードします。ダウンロードされたファイルは zip アーカイブです。
2. zip ファイルを解凍し、プロジェクトをインポートします
次のファイルをプロジェクトの静的ファイルの対応するディレクトリにコピーします (.woff および .woff2 ファイルをスキップすることもできますが、インポート時にインポートしないでください)。
3. iconfont.css ファイルを変更します。
- iconfont は使用されるカスタム アイコンの名前です
- src パスは、ダウンロードされた tff ファイルのパスです。
- .bjs-icon-search はカスタム アイコン名です。
@font-face {
font-family: "iconfont"; /* Project id 4090979 */
src: url('/static/ttf/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 自定义icon */
.bjs-icon-search:before {
content: "\e615";
}4. ファイルを App.vue の CSS (グローバルに使用可能)、または対応するページの CSS にインポートします。
/* #ifndef APP-NVUE */
// nvue 页面暂时不支持自定义图标
@import '@/static/icon-css/customicons.css';
@import "@/static/icon-css/iconfont.css";
/* #endif */5. カスタムアイコンを使用する
vue3 が <template> ノードでスロットを使用する必要がある場合に注意してください。
<template v-slot:searchIcon>
<uni-icons class="search-bar-icon" color="#999999" size="30" type="home" />
<uni-icons custom-prefix="iconfont" type="bjs-icon-search" size="30"></uni-icons>
</template>vue2の場合:
<uni-icons slot="searchIcon" custom-prefix="iconfont" type="bjs-icon-search" size="30"></uni-icons>6. カラフルなアイコンの色を使用するか、サイズを変更します
プロジェクト設定でカラー オプションを選択し、元の tff およびその他のファイルを置き換えます。場合によっては、キャッシュが原因で効果が失敗することがあります。キャッシュをクリアして、もう一度コンパイルしてください。
7. 最終的な効果
