https://www.cnblogs.com/xiaomingge/articles/5421503.htmlcss
1、下載html
下載就是先將所選擇的圖標加入購物車,而後從購物車裏下載代碼就行,下載下來就是一個壓縮包,解壓後如ios
2、如何離線調用web
如第一步先將字體下載至本地,且必定要把demo裏的兩個文件.ttf和.woff引入。chrome
1.打開demo_unicode.html就能夠看見unicode碼和如何引入。app
2.1 引入文件 svg
2.2 html代碼字體
<div>
<p class="iconfont"></p>
<p class="iconfont"></p>
<p class="iconfont"></p>
</div>
2.3 CSS代碼url
打開demo下的iconfont.css文件,以下:spa
@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1519883495629'); /* IE9*/ src: url('iconfont.eot?t=1519883495629#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff) format('woff'),
url('iconfont.ttf?t=1519883495629') format('truetype'),/*chrome,firefox,opera,safari,Andriod,ios 4.2+*/
url('iconfont.svg?t=1519883495629#iconfont') format('svg');/*ios 4.1-*/
}
.iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-shouye:before { content: "\e613"; } .icon-shouye1:before { content: "\e614"; } .icon-icon:before { content: "\e651"; }
複製到本身的CSS代碼:
@font-face {font-family: "iconfont"; src: url('font/iconfont.eot?t=1519883495629'); /* IE9*/ src: url('font/iconfont.eot?t=1519883495629#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff) format('woff'), url('font/iconfont.ttf?t=1519883495629') format('truetype'),/*chrome,firefox,opera,safari,Andriod,ios 4.2+*/ url('font/iconfont.svg?t=1519883495629#iconfont') format('svg');/*ios 4.1-*/ } .iconfont { font-family:"iconfont" !important; font-size:36px;
color:blue;
font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
改變一下url路徑,字體大小,顏色便可。