700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 网页中使用iconfont图标

网页中使用iconfont图标

时间:2019-10-11 16:48:52

相关推荐

网页中使用iconfont图标

如何在网页中使用iconfont图标

在页面中使用iconfont小图标

教程:

1.登录iconfont官网站

2.点击图标库->官方图标库

3.选择所需要的图标添加入库,右上角查看添加进来的图标,然后添加至项目,点击确定。

4.下载至本地

5.解压缩该包后,将文件夹中后缀为ttf、woff、woff2的文件复制到项目的src->assets->styles->新建一个文件夹命名为iconfont里面.

6.再把iconfont.css文件复制到刚刚的styles文件夹中

(若styles不存在则自行创建)

7.Vscode中打开iconfont.css文件修改信息:

主要是添加./iconfont/…

8.在main.js中添加 import ‘./assets/styles/iconfont.css’

import './assets/styles/iconfont.css'

9.添加完成后即可在代码中使用:

<span class=”iconfont”>(此处添加对应图标的对应代码)</span>

例如:对应代码为复制的iconfont对应代码

<span class="iconfont" >&#xe685;</span>

10.到此已经完成了,后续需要添加新的图标,添加到库之后是需要重新下载到本地哦~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。