I.はじめに
フォント ライブラリ アイコンを導入すると、iconfont開発効率とプロジェクトの保守性が向上します。Alibaba ベクター アイコン ライブラリはiconfont間違いなく最良の選択肢の 1 つです。今日はuniappそれをエレガントに導入する方法を紹介します。
2.参考手順
1. 登録してログインします
- 公式サイトに登録してログインする
2. プロジェクトを作成する
- 上部操作バーのリソース管理→マイプロジェクト→新規プロジェクト
3. アイコンを検索してライブラリに追加します
- アイコンを検索してライブラリに追加すると、選択したアイコンが右上隅のショッピング カート アイコンで選択した番号にマークされます。
4. プロジェクトに追加するアイコンを選択します
- 右上隅のショッピングカートアイコンをクリックして、選択したアイコンをアイテムに追加します
5.生成されたCSSコードをコピーします。
- プロジェクトを追加することを確認します。自動的にプロジェクトに入ります。
- 赤い文字をクリックしてください
暂无代码，点击生成 - コードが生成されると、CSS リンクが表示されます。リンクをクリックすると、新しいウィンドウで開きます。
6. すべて選択してuniappプロジェクトにコピーします
7. 注意点
- ネットワーク パスにはプロトコル ヘッダーを追加する必要があります
https。詳細については、uniapp-font アイコンを参照してください。 - に変更された単位
rpx
8. 引用と使用
- で
App.vue引用
<style lang="scss">
@import "@styles/iconfont.scss";
</style>
- ファイルで使用されます。
iconfont className
<text class="iconfont iconrenshu"></text>