字体图标的定义与使用

1.声明字体文件

@font-face {
  font-family: 'itcast';
  src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff');
}

　　1.1 字体文件格式

• eot : embedded-opentype
• svg : svg
• ttf : truetype
• woff : woff

 

2.声明对应类名样式

[class^="icon-"],
[class*=" icon-"] {
  /*注意上面选择器中间的空格*/
  /*我们使用的名为itcast的字体就是上面的@font-face的方式声明的*/
  font-family: itcast;
  font-style: normal;
}

3.使用字体图标

 .icon-mobilephone::before{ content: '\e908'; } 

转载于:https://www.cnblogs.com/Vayne-N/p/7650288.html