H5引入阿里矢量图标(Symbol)

觉得文字枯燥的，观看我发布在B站的视频：

https://www.bilibili.com/video/BV1zp4y1176J?from=search&seid=9403115198643297668

步骤：
登陆阿里巴巴矢量图库https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

选择Symbol并复制下面代码,把代码放入script标签中并在前面添加https:

<script src="https://at.alicdn.com/t/font_923533_fv7k17g9yjf.js"></script>

添加CSS通用代码：

<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>

添加图标：

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>

点此复制代码替换掉href里面的内容，注意：#要保留

全部代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>helloword</title><script src="https://at.alicdn.com/t/font_923533_fv7k17g9yjf.js"></script><style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head><body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-mima2"></use></svg></body>
</html>

H5引入阿里矢量图标(Symbol)相关推荐

uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图点击右上角的购物车添加到项目这里有坑首先你不选中在线链接你是看不到 @font-f ...
在uni-app里面怎么引入阿里矢量图标库？
最近在学习uni-app,每次在需要用到icon的时候都得下载下来,感觉好麻烦,所以就找到了直接引入阿里矢量图标库的方法,妈妈再也不用担心我为下载icon的样式不规范而发愁了,以下方法供大家参考在图 ...
Vue项目中，引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
前端react引入阿里矢量图标
搜索项目所需的图标选中喜爱的图标并点击加入购物车 (记得登录注册用户) 点击下载素材(根据所需下载) 选中所需颜色下载图片或者代码并引入到项目中
小程序以及h5引入阿里图标不显示最简单解决方案
小程序项目,按照老方法,图标部分手机不显示,经理炸毛,自己也头痛,网上搜了一大堆方法,有转化base64的,还有其他各种的,感觉太麻烦了也不好用,本人就讨厌麻烦,直男程序员一枚,今天花时间,认真研究了 ...
、阿里矢量图标(字体图标)
# 一.阿里矢量图标(字体图标) 网址:https://www.iconfont.cn/ #### 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4. ...
阿里矢量图标(字体图标)使用
一.阿里矢量图标(字体图标) 网址:https://www.iconfont.cn/ #### 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择 ...
CSS阿里矢量图标(字体图标)
网址: https://www.iconfont.cn 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解压文件 5.把下载 ...
# 一、阿里矢量图标(字体图标)网址：https://www.iconfont.cn/#### 1.使用步骤1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右
一.阿里矢量图标(字体图标) 网址:iconfont-阿里巴巴矢量图标库 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解 ...

H5引入阿里矢量图标(Symbol)

H5引入阿里矢量图标(Symbol)相关推荐

最新文章

热门文章