如何将Iconfont的图标以Symbol方式引入web页面

首先在iconfont图标库中,找到需要的图标,点击购物车图标“添加入库”。

如何将Iconfont的图标以Symbol方式引入web页面

2

打开购物车,点击下方“添加至项目”按钮,如果没有项目,就新建一个。

如何将Iconfont的图标以Symbol方式引入web页面

3

在我的项目页,可以看到3种引入方式,以及图标的编号。

如何将Iconfont的图标以Symbol方式引入web页面

4

切换到Symbol方式,点击“查看在线链接”,生成以下代码并复制:

如何将Iconfont的图标以Symbol方式引入web页面

5

打开你的网页代码,添加script标签,将上面的代码粘贴过来:

如何将Iconfont的图标以Symbol方式引入web页面

6

然后加入控制图标样式的css代码(通用,引入一次就行):

<style type="text/css">

.icon {

width: 1em; height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

</style>

如何将Iconfont的图标以Symbol方式引入web页面

7

最后,使用svg标签引用图标。图标名称在iconfont“我的项目”中查看,参见第3步图片。

<svg class="icon" aria-hidden="true">

<use xlink:href="#icon-xxx"></use>

</svg>

如何将Iconfont的图标以Symbol方式引入web页面

8

想要修改图标样式,可以通过font-size,color来调整:

如何将Iconfont的图标以Symbol方式引入web页面

9

想要增加或更换新的图标,只需重复1、2、3步骤,并在第4、5步更新一下代码,最后在第7步增加新图标的svg标签即可。

如何将Iconfont的图标以Symbol方式引入web页面

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://acg.inmoke.com/zixun/hanfu/35102.html