說明一下:下載素材就是能夠下載該icon的svg,png,ai等格式。下載代碼就是將icon對應完整的實現代碼以及使用案例下載下來css
1:選擇使用unicode方式:html
他unicode模式下的代碼複製本身的css文件中以後:注意給前面加上 "http:"否則有問題。web
而後就能夠在本身的類中添中: font-family: "iconfont" !important:svg
@font-face { font-family: 'iconfont'; /* project id 808917 */ src: url('http://at.alicdn.com/t/font_808917_qreydq5rbd.eot'); src: url('http://at.alicdn.com/t/font_808917_qreydq5rbd.eot?#iefix') format('embedded-opentype'), url('http://at.alicdn.com/t/font_808917_qreydq5rbd.woff') format('woff'), url('http://at.alicdn.com/t/font_808917_qreydq5rbd.ttf') format('truetype'), url('http://at.alicdn.com/t/font_808917_qreydq5rbd.svg#iconfont') format('svg'); } .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
font-family:"iconfont"!important:
在html中使用選擇對應的unicode就能夠了學習
<i class="iconfont"></i>
2:選擇font class方式字體
將font calss下面的路徑複製本身的須要的頁面head部分:如:注意給前面加上 "http:"否則有問題。url
<link rel="stylesheet" href="http://at.alicdn.com/t/font_808917_rais7893e6p.css">
而後再頁面中加入 :類名 iconfont 以及圖標對應的類名spa
<i class=" iconfont icon-wendu"></i>
3:選擇symbol方式code
將fsymbol下面的路徑複製本身的須要的頁面head部分:如:注意給前面加上 "http:"否則有問題。以及引入通用css代碼(引入一次就行):(這種方式在之後是比較好用的,雖然我的喜歡用第一中方式)orm
<script src="http://at.alicdn.com/t/font_809148_a38rdozsusq.js"></script> <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-ziwaixian"></use> </svg>
最後:須要注意的是這些都是經過font-family來實現的,因此不支持圖片顏色,只能爲單一顏色,並且能夠經過font-size來改變其大小。
學習借鑑:http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
時間:2018/08/27/19:42:10