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

 时间:2024-10-13 04:53:45

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

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

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

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

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

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

7、最后,使用svg标签引用图标。图标名称在iconfont“我的项目”中查看,参见第3步图片。<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use></svg>

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

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

如何将Iconfont的图标以Symbol方式引入web页面
  • 如何在AI给图片添加柔和颗粒特效
  • ai怎样制作立体矩形
  • 怎么用ai制作照片卷边效果?illustrator
  • illustrator中描边大小随着图形大小变化而变化
  • AI怎么把图形变成凸边效果
  • 热门搜索
    重庆周边旅游攻略 珠海东澳岛旅游 韩国旅游签证办理流程 河源旅游攻略 旅游相册名称大全 苏州旅游景点推荐 永州旅游景点大全 美国旧金山旅游攻略 中国禁止韩国旅游 常州旅游攻略二日游