阿里巴巴字體圖標使用

一、登陸阿里巴巴字體圖標庫http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

二、在圖標庫中選擇須要的圖標，鼠標通過該圖標加入購物車

三、選擇完成後  點擊右上角購物車--》添加到對應項目

四、圖標管理--》個人圖標--》個人項目--》選擇對應項目--》更多操做--》編輯項目--》添加協做者，則該項目中的全部人員都可看到該項目中的全部圖標

五、圖標管理--》個人圖標--》個人項目--》選擇對應項目--》下載到本地

六、將壓縮包中的iconfont.css中的css內容放到項目的css文件中  並將字體文件和svg文件放到項目中，確認css文件中引入的字體文件路徑正確性

七、html中字體圖標的使用方式，如：<i class="iconfont  icon-zuojiantou"></i>

其中class名iconfont  爲全部字體圖標都須要的公用class  後邊的class名爲對應圖標的class名  

經過點擊Font class便可看到圖標下邊會顯示對應的class名

注：1）字體圖標的大小經過font-size控制，字體越大圖標越大    字體顏色經過color控制 能夠控制字體的屬性均可以用 ( 使用時與普通字體無異，能夠設置字號大小、顏色、透明度等等)

　　2）兼容性：兼容IE8及以上瀏覽器

@font-face {
    font-family: 'iconfont';
    src: url('font/iconfont.eot');
    src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
    url('font/iconfont.woff') format('woff'),
    url('font/iconfont.ttf') format('truetype'),
    url('font/iconfont.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;
}
.icon-wxbsousuotuiguang:before { content: "\e620"; }

.icon-iconfontxingxing:before { content: "\e628"; }

.icon-iconfontphone:before { content: "\e634"; }

.icon-fenxiang:before { content: "\e601"; }

.icon-rili:before { content: "\e602"; }

.icon-piaofang:before { content: "\e603"; }

.icon-fanhui:before { content: "\e600"; }

.icon-rili1:before { content: "\e604"; }

.icon-rili2:before { content: "\e605"; }

.icon-rili3:before { content: "\e606"; }

.icon-rili4:before { content: "\e607"; }

.icon-rili5:before { content: "\e608"; }

.icon-rili6:before { content: "\e609"; }

.icon-rili7:before { content: "\e60a"; }

.icon-youjiantou:before { content: "\e60b"; }

.icon-zuojiantou:before { content: "\e60c"; }

.icon-shangpin-xianxing:before { content: "\e889"; }

font.css

 

<i class="iconfont icon-zuojiantou"></i>
<i class="iconfont icon-rili7"></i>
<i class="iconfont icon-rili3"></i>
<i class="iconfont icon-fenxiang"></i>
<i class="iconfont icon-shangpin-xianxing"></i>

html-demo