三分鐘教會你自制iconFont字體圖標庫

app開發的時候，咱們大多會用到字體icon，下面咱們就講解一下，如何自定義生成 iconFont

通常狀況，咱們優先選擇在 Iconfont-阿里巴巴矢量圖標庫 下載咱們須要的矢量icon的svg格式, 若是這裏沒有你須要的icon，也能夠本身切圖把png格式的圖片轉化爲svg;

svg 導入並生成 font

在線轉換網址

導入多個svg圖片

點擊右下角

記好每一個icon的code

而後點擊 download

如圖：

而後咱們寫 less（或者css），定義這些icon的樣式：

@assets: '../assets/fonts';
@version: '?v=1.1.0';

@font-face {
    font-family: 'icomoon';
    /* 自行安裝第三方字體圖標庫 */
    src: url('@{assets}/icomoon.eot@{version}');
    src: url('@{assets}/icomoon.woff@{version}') format('woff'),
    url('@{assets}/icomoon.ttf@{version}') format('truetype'),
    url('@{assets}/icomoon.svg@{version}') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 根據第三方字體圖標庫編寫 */
/* 舉例：fa 就是 prefixClass 的值，下面的的圖標 css class 命名都要用 fa- 開頭 */
.fa {
    display: inline-block;
    /* 如下的 font 與上面 @font-face 的 font-family 要一致*/
    font: normal normal normal 14px/1 icomoon;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-home:before {
    content: "\e900";
}

.fa-doc:before {
    content: "\e903";
}

.fa-knowledge:before {
    content: "\e906";
}

.fa-discuss:before {
    content: "\e901";
}

.fa-question:before {
    content: "\e902";
}

複製代碼

而後就能夠把這個less引入到咱們的入口文件裏面；

調用舉例：

<span className="fa fa-home"></span>
/**更改大小和顏色**/
 <span className="fa fa-home" style="font-size:30;color: blue"></span>
複製代碼

實際效果：