UNI-APP 使用 ICONFONT

- 日理万妓 2021-09-29 23:44 243阅读 0赞

# [UNI-APP 使用 ICONFONT][UNI-APP _ ICONFONT] #

更新：

根据官网 小于 40kb 的字体文件可以直接本地引用。

方法如下：

首先下载字体文件。

然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。

放入到 static 下。

修改 iconfont.css 文件，如下

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDUvMTM2NDk3OC0yMDE5MDUxNjE2MTUxODUxNC0xMzM1NzY1OTcyLnBuZw][]

左侧红框里是留下的字体文件，右侧是修改 iconfont.css 样式。

然后，引入 样式文件：

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDUvMTM2NDk3OC0yMDE5MDUxNjE2MjAxOTIzNi0xNDM1MjYxMzE5LnBuZw][]

最后，就可以在 项目中使用了。

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDUvMTM2NDk3OC0yMDE5MDUxNjE2MTkyNzI0MS01NzU0MzE2MDAucG5n][]

下面是 实际效果：设置了大小和颜色。

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDUvMTM2NDk3OC0yMDE5MDUxNjE2MjEzNjg1Ni0xNDMwMzIwMzYwLnBuZw][]

--------------------

使用 uni-app 做项目时需要用到 iconfont。和 web 使用略有差别。谨以此记录。

因为 uni-app 不能使用本地字体图标库，所以不能直接下载使用。

1、将iconfont中需要的图标，加入购物车，然后放到项目。生成在线代码，稍后用。

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDEvMTM2NDk3OC0yMDE5MDEwOTE3MDU1ODcyOS00NjIzNzI0OS5wbmc][]

2、下载项目至本地。然后解压取出 iconfont.css 文件。

3、将 1 中的在线代码 copy 替换掉 iconfont.css 中的 @font-face。并且加上前缀 https: 。完成后如下：

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDEvMTM2NDk3OC0yMDE5MDEwOTE3MTIwMjQxNi04Njk5ODM1MzUucG5n][]

这样就是引用的 阿里巴巴的 在线图标库了。

4、在项目中需要的地方引入 这个改好的 iconfont.css 文件。

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDEvMTM2NDk3OC0yMDE5MDEwOTE3MTM1MjUyNi00NjcyMTA0OTEucG5n][]

HTML 部分：

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDEvMTM2NDk3OC0yMDE5MDEwOTE3MTQ1OTYwOS0yMTEyNDA0NTE2LnBuZw][]

使用图表有两种 方法：如上所示。其中 selfStyle 是自己设置的 图标样式，就可以像设置字体那样设置了。

至此，完成。

原文链接 ： [https://www.cnblogs.com/xguoz/p/10245641.html][UNI-APP _ ICONFONT]

[UNI-APP _ ICONFONT]: https://www.cnblogs.com/xguoz/p/10245641.html
[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDUvMTM2NDk3OC0yMDE5MDUxNjE2MTUxODUxNC0xMzM1NzY1OTcyLnBuZw]: /images/20210726/399cd2b22504461daa9b986b290c8679.png
[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDUvMTM2NDk3OC0yMDE5MDUxNjE2MjAxOTIzNi0xNDM1MjYxMzE5LnBuZw]: /images/20210726/33f3c39547134f88a9f14e849fe4d483.png
[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDUvMTM2NDk3OC0yMDE5MDUxNjE2MTkyNzI0MS01NzU0MzE2MDAucG5n]: /images/20210726/2806ba0696264834a8f69b4622aee6c5.png
[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDUvMTM2NDk3OC0yMDE5MDUxNjE2MjEzNjg1Ni0xNDMwMzIwMzYwLnBuZw]: /images/20210726/602f84d4cc1c4922a46f823fce45b2bf.png
[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDEvMTM2NDk3OC0yMDE5MDEwOTE3MDU1ODcyOS00NjIzNzI0OS5wbmc]: /images/20210726/baa3c27ac8b3492b9cd8195fcf2b6963.png
[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDEvMTM2NDk3OC0yMDE5MDEwOTE3MTIwMjQxNi04Njk5ODM1MzUucG5n]: /images/20210726/76310a30b3ad47f0859eba33ca00eb74.png
[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDEvMTM2NDk3OC0yMDE5MDEwOTE3MTM1MjUyNi00NjcyMTA0OTEucG5n]: /images/20210726/8f5d3ca995f242aa870b9be4346bc8bd.png
[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2NDk3OC8yMDE5MDEvMTM2NDk3OC0yMDE5MDEwOTE3MTQ1OTYwOS0yMTEyNDA0NTE2LnBuZw]: /images/20210726/5db44068f9ee4657b7846251adc3ec72.png