uni-app字体图标引入

男娘i 2022-11-05 05:18 171阅读 0赞

# uni-app字体图标引入 #

## 1.从阿里巴巴矢量图标库下载所需图标文件 ##

官网链接：`https://www.iconfont.cn/`

## 2.下载完成后解压如下 ##

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

## 3.在项目中app.vue中引入 ##

此方法全局引入，局部引入可在需要的页面下引入

@import url("./static/fonts/iconfont.css");

## 4.配置字体文件 ##

在url地址中加入你的字体文件存放路径以 ~@开头  
配置之前：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70 1]

配置之后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70 2]

## 5.在页面上使用 ##

![在这里插入图片描述][20210304105219298.png]  
class类的名称，  
第一个为  
![在这里插入图片描述][20210304105326944.png]  
第二个为  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70]: /images/20221023/12b86aee57cd4ce3956760d01cffbcbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70 1]: /images/20221023/5e84ff11e921432a833d8ea8fc05fdfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70 2]: /images/20221023/372f9fdc8e17419f86fb286b7d22d426.png
[20210304105219298.png]: /images/20221023/9db0f96c69a8451fa355574b8a100674.png
[20210304105326944.png]: /images/20221023/505edc12161644cf88cfed7401f200e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70 3]: /images/20221023/dc6b8fcdd3eb42829bf23e331d504bea.png