最近,在使用Weex開發一款移動電商應用,期間需要用到大量的圖示,不經意間想到了阿里的iconfont。
那麼我們如何使用iconfont呢?這裡給大家簡單介紹下iconfont的使用步驟:
1、先進入iconfont官網http://www.iconfont.cn; 2、新建一個圖示專案,如下圖:
3、在自己的iconfont專案中查詢,點選檢視線上連結,如下圖:4、點選【我的專案】,然後點選生成程式碼,將生成的程式碼新增到Weex專案中,如下圖:
5,在Weex 專案的元件初始化函式中,引入圖片集,注意用駝峰命名。
created(){
let domModule = weex.requireModule('dom');
domModule.addRule('fontFace',{
'fontFamily': "iconfont",
'src': "url('http://at.alicdn.com/t/font_521216_w212618qmo.ttf')"
})
}
複製程式碼
6,然後,就可以在Weex頁面中使用這些圖示了。例如:
<text class="iconfont bar-ic"></text>
<style>
.iconfont {
font-family:iconfont;
}
.bar-ic{
padding-top: 14px;
font-size: 38px;
color: red;
}
</style>
複製程式碼
執行效果如下:
iconfont支援三種引用方式:unicode引用、font-class引用和symbol引用。
unicode引用
unicode是字型在網頁端最原始的應用方式,特點是:
- 相容性最好,支援ie6+,及所有現代瀏覽器。
- 支援按字型的方式去動態調整圖示大小,顏色等等。
- 但是因為是字型,所以不支援多色。只能使用平臺裡單色的圖示,就算專案裡有多色圖示也會自動去色。
unicode使用步驟如下: 第一步:拷貝專案下面生成的font-face:
@font-face {font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
複製程式碼
第二步:定義使用iconfont的樣式
.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;}
複製程式碼
第三步:挑選相應圖示並獲取字型編碼,應用於頁面
<i class="iconfont">3</i>
複製程式碼
font-class引用
font-class是unicode使用方式的一種變種,主要是解決unicode書寫不直觀,語意不明確的問題。使用步驟如下: 第一步:拷貝專案下面生成的fontclass程式碼
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
複製程式碼
第二步:挑選相應圖示並獲取類名,應用於頁面
<i class="iconfont icon-xxx"></i>
複製程式碼
symbol引用
這是一種全新的使用方式,也是平臺目前推薦的用法。與上面兩種相比具有如下特點:
- 支援多色圖示了,不再受單色限制。
- 通過一些技巧,支援像字型那樣,通過font-size,color來調整樣式。
- 相容性較差,支援 ie9+及現代瀏覽器。
- 瀏覽器渲染svg的效能一般,還不如png。
使用步驟如下: 第一步:拷貝專案下面生成的symbol程式碼
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
複製程式碼
第二步:加入通用css程式碼
<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-xxx"></use>
</svg>
複製程式碼
參考:iconfont使用技巧