uni-app中如何引入阿里iconfont图标字体(详细教程)

落日映苍穹つ 2023-01-17 04:56 529阅读 0赞

最近的项目中用到了iconfont字体，虽然之前已经用过很多次了，但是一直没有认真的整理过，所以这次就整理一下吧。

1.  进入iconfont首页，在这里可以选择自己想要在项目中添加的iconfont图片字体。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70]

1.  选择一个图标库，在图标上面点击购物车，添加到自己的项目。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 1]
2.  点击右上方的购物车，里面就有自己刚刚添加的图标。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 2]
3.  点击添加至项目，如果没有创建过项目，则手动创建项目。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 3]
4.  创建完项目，在首页资源管理里面找到我的项目，打开。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 4]
5.  打开之后，找到刚才添加的图标，点击生成代码，然后点击复制代码。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 5]
6.  然后在uni-app项目中的tstatic文件夹下面新建iconfont.css，并编写下面的代码。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 6]
7.  然后在App.vue文件里面进行全局引入。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 7]
8.  具体使用，这里我使用了三目运算符，正常是这样使用的`class=“iconfont icon-biyan”`。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70]: /images/20221022/e1f95a58990143cfbc637fdf1961a23e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 1]: /images/20221022/9fd879e000844cb0a3804bead1f64406.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 2]: /images/20221022/eccc19d030fd4cd7ba75b46d050a6802.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 3]: /images/20221022/384478fe56934f658c11ad65d87818d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 4]: /images/20221022/cbc0502351844b6dad969f4e4a3fb737.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 5]: /images/20221022/b3bce7e735ea485bbde39dcda9afd5d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 6]: /images/20221022/fbdf0242bf834a2abfb21c3f6a69aa99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 7]: /images/20221022/dd1156f80c5b4ac18cfd8ba940c87a6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70 8]: /images/20221022/7bbc248e3acb451e9be35e6c4554caeb.png