-
1. 在iconfont官网https://www.iconfont.cn/中选中需要的icon
进入官网之后需要登录，可以直接选择GitHub登录或者微博登录，登录之后搜索需要的icon，并加入到购物车。
加入购物车
-
2. 将icon加入到指定项目
选好icon之后点击页面右上角的购物车，点击添加到指定的项目，如果之前没有项目就新建项目。
添加到指定项目
-
3. 通过在线引入的方式将icon引入到项目中
进入到添加的项目中，选择symbol，点击生成代码：
点击生成代码
点击使用帮助
找到symbol使用
在帮助文档中找到symbol使用，拷贝上面symbol点击生成的代码（不是文档中的symbol代码）到全局引入.js文件的地方，比如：
<body>
<script src="//at.alicdn.com/t/font_2541171_6j176nunsfb.js"></script>
</body>
在需要引入icon的.html中添加css（最好在项目中全局定义）。
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
在需要引入icon的位置加入如下内容进行引入该icon
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
此处的#icon-xxx需要换为项目中的icon的名称
image.png
-
4. 通过本地引入的方式引入icon
本地引入时将symbol下生成的代码粘贴到浏览器地址栏中；
粘贴代码到浏览器地址栏
将浏览器中的内容另存为一个.js文件，比如保存为icon.js，将该.js文件保存到项目指定位置，并在全局中引入该.js文件，并删除在线引入的方式。比如：
<body>
<!-- <script src="//at.alicdn.com/t/font_2541171_6j176nunsfb.js"></script> -->
<script src="/src/global/icon/icon.js"></script>
</body>
网友评论