养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

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

时间:2024-11-02 20:25:17

Iconfont是一个矢量图标库,为前端人员提供了3牡啾锯辏种方式将图标引入web页面,这里主要讲一下未来主流的Symbol引用方式。

工具/原料

苹果macpro

macOS11.4

SublimeText3.2.2

ie9+,及现代浏览器

方法/步骤

1、首先在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代码(通用,引入一次就行):<stylet鲻戟缒男ype="text/css">.icon惺绅寨瞀{width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;}</style>

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

7、最后,使用svg标签引用图标。图标荏半吨蛸名称在iconfont“我的项目”中查看,参见第3步图片。<svgclass=&q锇栀劐箨uot;icon"aria-hidden="true"><usexlink:href="#icon-xxx"></use></svg>

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

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

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

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

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

© 一点知识