前端icon字型圖示的引用方法
要在檔案中嵌入自定義的字型圖示，首先在工程目錄中建立font資料夾，裡面用來存放四種格式的字型：
- xxx.eot
- xxx.svg
- xxx.ttf
- xxx.woff
在CSS中配置字型：
@font-face{
font-family: fontName;
src: url('/font/xxx.eot') format('embedded-opentype'),
url('/font/xxx.svg') format('svg'),
url('/font/xxx.ttf') format('truetype'),
url('/font/xxx.woff') format('woff');
}
在CSS中配置選擇器：
[class^="icon-"],
[class*="icon-"]{
font-family: fontName;
font-style: normal;
}
[class^="className-"]：匹配class屬性中第一個以“className-”為字首的DOM節點樣式，如匹配：
<div class="className-text"></div>
<div class="className-next"></div>
[class*="className-"]：匹配class屬性中非第一個以“className-”為字首的DOM節點樣式，如匹配：
<div class="box className-text"></div>
<div class="top_bar className-next"></div>
兩個匹配符聯合寫出之後，效果就是匹配class中有以“className-”為字首的DOM節點樣式
在HTML文字中嵌入字型：
<i class="icon-iconName"></i>
在HTML中嵌入文字字型一般用<i>標籤，class中標註字首為“icon-”，如：
<div>
<i class="icon-phone"></i>
<span>888-888-8888</span>
</div>
在CSS中設定<i>標籤：
.icon-iconName::before{
content: '\iconcode';
font-size: 16px;
}
將標籤設定為::before(或::after)，同時設定其中的content內容和字型大小，content內容為字型官網提供的字型編碼，如：
.icon-phone::before{
content: '\f11c';
font-size: 20px;
}
Demo(基於Material Design Icon):
HTML
<div>
<i class="icon-phone"></i>
<span>888-888-8888</span>
</div>
CSS
@font-face {
font-family: md;
src: url('materialdesignicons-webfont.eot') format('embedded-opentype'),
url('materialdesignicons-webfont.svg') format('svg'),
url('materialdesignicons-webfont.ttf') format('truetype'),
url('materialdesignicons-webfont.woff') format('woff');
}
[class^="icon-"],
[class*="icon-"] {
font-family: md;
font-style: normal;
}
.icon-phone::before{
content: '\f11c';
font-size: 20px;
}