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 的快速使用。

微信关注“优月优”公众号,获取更多学习资源
微信公众号
关注我们,每天及时接收最新的学习资料
14800人已关注
分享到:
赞(1) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏