css引入矢量图标_icon彩色图标 mui如何增加自定义icon图标 如何引入外部icon图标 阿里巴巴矢量图标...

官方教程我看了好久才看明白，最后看了阿里巴巴阿里巴巴矢量图帮助网址；，今天周日，现在分享下我的方法！不对的地方请多指教！！！

第一步：

登录阿里巴巴矢量图网站，也可直接复制后面网址：http://www.iconfont.cn/

普通用户直接选择微博登录，有时候会登录失败！

PS：请清除浏览器缓存再刷新几次，说不定就可以了！或者重启电脑，等等，各种方法都可以试试！！！

第二步：

登录成功之后可以直接搜索自己想要的图标即可！右上角那里有图标库，也可以选择相同风格或者彩色图标，

第三步：

搜索到自己想要的图标也可以从图标库浏览找到之后鼠标移动到图标上，会出现三个选项，点击上面购物车图标可以加入购物车！

如果需要多张图标，每个都加入购物车即可！

第四步：

图标选择完毕后，找到购物车，如果没有购物车可以下拉一下网页就有了，或者自己慢慢找找，你添加的图标都在购物车里！

第五步：

把你所有图片点击添加到项目，然后点击右边一个加号文件夹图标，就可以添加项目名称，输入你想要项目名称，这个可以随便输入。

第六步：

找到你刚才项目，点击下载到本地即可！或者也可以用远程链接，都可以，我是下载到本地项目里！

第七步：

把下载文件加压出来！

第八步：

找到iconfont.js这个文件，把他复制放到你的项目里，项目根目录或者js文件夹都可以。

第九步：

1.在网页引入js文件：我的是在js文件夹下。

2.在网页把矢量图专用他css样式复制进去。需要可以自己微调！

.icon {

width: 1em;

height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

3.找到需要修改的地方，如果原来有图标就把原来图标代码去掉即可，不会看图，原来class="mui-icon" 这个不要去掉保留

以底部导航为例

原来代码：【

电话

】

替换后代码：【

首页

】

图标代码可以去阿里巴巴矢量图库，找到你的项目，复制代码即可，是在弄个不懂可以看图，

第十步：

阿里巴巴矢量图帮助网址；阿里巴巴矢量图帮助网址； http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

直接查看symbol引用