iconfont字體圖標(biāo)就是用字體來(lái)代替圖標(biāo)、圖片文件的做法，并且通過(guò)字體圖標(biāo)可以對(duì)圖標(biāo)的大小、顏色等進(jìn)行控制，但是缺點(diǎn)就是只能實(shí)現(xiàn)一種顏色，不能像圖片那樣含有各種顏色。
通過(guò)阿里巴巴圖標(biāo)庫(kù)制作字體圖標(biāo)步奏如下（默認(rèn)已注冊(cè)阿里巴巴圖標(biāo)庫(kù)）：
1、首先搜索所要展示的圖片，找到后點(diǎn)擊入庫(kù)。
2、點(diǎn)擊入庫(kù)的圖標(biāo)，結(jié)果如下圖所示，選擇添加至項(xiàng)目或點(diǎn)新建項(xiàng)目。
3、點(diǎn)擊確定之后如下圖所示，鼠標(biāo)懸浮在上面可以選擇對(duì)圖標(biāo)信息進(jìn)行修改。
4、選擇Font class，點(diǎn)擊下載至本地便把字體編輯好了。
5、結(jié)下來(lái)是使用字體，選中生成的字體添加至項(xiàng)目工程中。
6.修改css文件引用生成的字體
iconfont.css內(nèi)容如下：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>postMessage解決跨域、跨窗口消息傳遞</title>
- <style type="text/css">
- @font-face {font-family: "iconfont";
- src: url('fonts/iconfont.eot?t=1483950473775'); /* IE9*/
- src: url('fonts/iconfont.eot?t=1483950473775#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('fonts/iconfont.woff?t=1483950473775') format('woff'), /* chrome, firefox */
- url('fonts/iconfont.ttf?t=1483950473775') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
- url('fonts/iconfont.svg?t=1483950473775#iconfont') format('svg'); /* iOS 4.1- */
- }
-
- .iconfont {
- font-family:"iconfont" !important;
- font-size:16px;
- font-style:normal;
- color: lightblue;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- .icon-xingzuotianchengzuo:before { content: "\e672"; }
-
- @font-face {font-family: "iconfont";
- src: url('fonts/iconfont.eot?t=1483951178754'); /* IE9*/
- src: url('fonts/iconfont.eot?t=1483951178754#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('fonts/iconfont2.woff?t=1483951178754') format('woff'), /* chrome, firefox */
- url('fonts/iconfont2.ttf?t=1483951178754') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
- url('fonts/iconfont.svg?t=1483951178754#iconfont') format('svg'); /* iOS 4.1- */
- }
-
- .icon-star:before { content: "\e602"; }
- </style>
- </head>
- <body>
- <div style="width: 200px; float: left;margin-right: 200px;border: 1px solid #3F3F3F;">
- <i class="iconfont icon-xingzuotianchengzuo"></i>
- <i class="iconfont icon-star"></i>
-
- </div>
- </body>
- </html>
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
