uni-app iconfont 字体图标的引入

怼烎@ 2023-06-23 13:21 21阅读 0赞

[https://www.jianshu.com/p/c2b100636006][https_www.jianshu.com_p_c2b100636006]

# uni-app iconfont的引入 #

在vue页面中，如何引用iconfont字体库？  
首先登陆

https://www.iconfont.cn #注册并创建自己的项目

![format_png][]

image.png

创建后，搜索自己需要的图标，加入到购物车  
例如：设置

![format_png 1][]

image.png

添加到项目

![format_png 2][]

image.png

在我的项目中，生成在线链接

![format_png 3][]

image.png

到此，素材已经准备好了。

在项目中引入  
生成 iconfont.css，并加入一下代码

@font-face {
        font-family: 'iconfont';
        src: url('//at.alicdn.com/t/font_1198534_o4wefru3dk.ttf') format('truetype');
    }
    
    .custom-font {  #自定义字体名称
        font-family: iconfont;
        margin-left: auto;
    }

在vue页面引入iconfont.css （可以不用引入也可以渲染字体图标）

@import './common/iconfont.css';

使用

<view class='custom-font'></view>

[https_www.jianshu.com_p_c2b100636006]: https://www.jianshu.com/p/c2b100636006
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNjg5Mzc4OC0xZTA5ODNhMjdlZGQ4MzFjLnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNjg5Mzc4OC05NjE2YmNmMmU4YWI2ZDllLnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNjg5Mzc4OC1kMjkwOWU3ZTcwZGQ1ZjRjLnBuZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNjg5Mzc4OC05YjNhMGUxMGU5ZDVmM2FhLnBuZw?x-oss-process=image/format,png