先上代碼：
html文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<link href="font.css" rel="stylesheet" type="text/css"/>
<body>
<header class="my-font icon-mobile">Come on</header>
<div class="container">
<article class="icon-search3 my-font">
fighting
</article>
</div>
<footer class="my-font icon-unfold">don't run</footer>
</body>
</html>css文件
@font-face {
font-family: "my-font";
src: url('icon/iconfont.eot?t=1499675870758'), /* IE9*/
url('icon/iconfont.eot?t=1499675870758#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('icon/iconfont.woff?t=1499675870758') format('woff'), /* chrome, firefox */
url('icon/iconfont.ttf?t=1499675870758') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('icon/iconfont.svg?t=1499675870758#iconfont') format('svg'); /* iOS 4.1- */
}
/*只要擁有這個類名，就可以使用定義好的樣式*/
.my-font {
font-family:"my-font" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-mobile:before { content: "\e638"; }
.icon-ipad:before { content: "\e7a7"; }
.icon-computer:before { content: "\e609"; }
.icon-search3:before { content: "\e7d1"; }
.icon-mobile1:before { content: "\e6cf"; }
.icon-arrowdropdown:before { content: "\e60a"; }
.icon-add:before { content: "\e6df"; }
.icon-packup:before { content: "\e749"; }
.icon-unfold:before { content: "\e74a"; }
這裏開始說明一下： 首先是css文件裏面@font-face的意思，這裏定義了你自己的字體名稱，我這裏取名叫my-font，也就是說以後想要用這個類型的字體直接 font-family裏面設爲my-font即可，具體樣式可參考我上面的代碼。 然後由於我使用的是阿里的圖標庫，下面會有你選擇下載的圖標的類名代碼，比如icon-mobile:before等等。
再看我代碼中的html元素，要用到字體圖標的地方，要加上自己的my-font類名，表示下面的font-falimy會使用自己定義的字體my-font，並且還要加上你想要引用的圖標類名，具體可參考上述代碼