前端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;

}