ホームページ > ウェブフロントエンド > uni-app > uniappでiconfontを使用する方法

uniappでiconfontを使用する方法

coldplay.xixi
リリース: 2023-01-13 00:44:16
オリジナル
9402 人が閲覧しました

uniapp で iconfont を使用する方法: まず必要なアイコンをダウンロードし、次に unicode を選択してクリックしてコードを生成し、次に iconfont.css に戻って css ファイルを開きます。最後に [https を追加する必要があります] [//at] :] の前に追加して、iconfont を呼び出します。

uniappでiconfontを使用する方法

このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、Dell G3 コンピューター。

推奨 (無料): uni-app 開発チュートリアル

uniapp でアイコンフォントを使用する方法:

#最初のステップ

iconfont に移動して、使用するアイコンを選択します

uniappでiconfontを使用する方法

ステップ 2

アイコンをダウンロード

uniappでiconfontを使用する方法

ステップ 3

ダウンロードが完了したらファイルを開いて、iconfont.css を除く他のすべてのファイルを削除します。

uniappでiconfontを使用する方法

ステップ 4

iconfont プロジェクトに戻り、unicode を選択します。クリックしてコードを生成します。以前にコードを生成したことがある場合は、この手順を無視して 5 番目の手順に進んでください

uniappでiconfontを使用する方法

#5 番目の手順

生成が完了したらクリックします。コードをコピーします。

uniappでiconfontを使用する方法#ステップ 6

iconfont.css に戻って開きます。 css ファイル。赤いボックスの内容に注意してすべて削除し、

uniappでiconfontを使用する方法

# に置き換えます。

uniappでiconfontを使用する方法

#https:

######ステップ 8#########アイコンフォントを呼び出す###
<template>
    <view class="translation">
                <!--可以愉快的调用啦-->
        <view class="iconfont icon-huhuan"></view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                val: &#39;iconfont的使用&#39;
            }
        }
    }
</script>
<style>
/*选择iconfont.css所在的路径*/
@import &#39;../../static/iconfont/iconfont.css&#39;;
</style>
ログイン後にコピー
######関連する無料学習の推奨事項: ###プログラミングビデオ#########

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート