阿里巴巴字体图标的使用

Unicode你选中的图标要是颜色是彩色的，在项目中显示为黑色

 

第一步：将自己选择需要的字体图标，加入到自己的项目中（没有可以新建一个）

 

 

 

 

 

 

 

第二步：将下面这段样式复制到项目的style中

<style>

@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1775237_diaak7pvvc6.eot');
src: url('//at.alicdn.com/t/font_1775237_diaak7pvvc6.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1775237_diaak7pvvc6.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1775237_diaak7pvvc6.woff') format('woff'),
url('//at.alicdn.com/t/font_1775237_diaak7pvvc6.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1775237_diaak7pvvc6.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}

</style>

 

第三步：将你的图标放到页面中（html）

<i class="myiconfont">&#xe630;</i>



方法二，使用font Class与Unicode一样，图标为默认的黑色



方法三：symbol，图标颜色为你自己选中的颜色一样
1、将生成的symbol 代码引入到项目中
　　eg：<script src="..pvvc6.js" type="text/javascript" charset="utf-8"></script>
2、在样式中一定要添加
　　

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

 

3、将你需要的图标放到项目中即可  

这里的 xlink: href ="#阿里图标复制的类名" 。点击项目的 Symbol 标签，复制代码。

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

</div>