uniapp 中如何使用 iconfont

uniapp 中如何使用 iconfont

最新在看uniapp的一些东西，正好用到了一些图标的东西，整理一下分享到博客上， 与大家一起学习。

第一步： 打开iconfont官网

iconfont官网：https://www.iconfont.cn/

第二步：选择自己喜欢的图标加入购物车

⚠️提示： 没有账号的先注册账号

如图所示，添加到购物车，添加到项目，创建自己的项目名称

第三步：拷贝项目下面生成的fontclass代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

⚠️注意：这里我选择的是 font class，大家也可以直接下载css的代码复制到项目的目录下面也可以

复制红框中的链接（加上 https，）直接访问就可以看到css的源码， 在项目目录下创建 common/css/icons.css 文件，将代码粘贴上去。

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第四步：挑选相应图标并获取字体编码，应用于页面

⚠️注意： 在css里面引入 icons.css 的文件

<text class="iconfont icon-home"></text>

完成以上步骤iconfont 的基本使用就可以搞定了。

下一篇文章中将分享在 HBuilderX 中如何利用插件来实现icon 的快速使用。