iconfont的引入方法

第一步：使用font-face声明字体
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
第二步：定义使用iconfont的样式
<pre>
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke- 0.2px;
-moz-osx-font-smoothing: grayscale;}
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">&#x33;<>

代码html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>icon</title>
    <link rel="stylesheet" href="css/iconfont.css">
</head>
<style>
    i:nth-of-type(1){
        font-size: 100px;
        color: #333;
    }
    i:nth-of-type(2){
        font-size: 200px;
        color: #1a1a1a;
        line-height: 300px;
    }
</style>
<body>
    <i class="iconfont">&#xf00a5;</i>
    <i class="iconfont">&#xe601;</i>
    <i class="iconfont">&#xe6bf;</i>
    <i class="iconfont">&#xe659;</i>
</body>
</html>

css

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1471336647'); /* IE9*/
  src: url('iconfont.eot?t=1471336647#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1471336647') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1471336647') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1471336647#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-nav:before { content: "f00a5"; }
.icon-nav1:before { content: "e601"; }
.icon-nav2:before { content: "e608"; }
.icon-nav3:before { content: "e6bf"; }
.icon-nav4:before { content: "e659"; }

字体下载完之后方在css文件夹下

简单效果

相关阅读:
Insus Meta Utility
The 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine.
Insus Binary Utility
asp.net实现文件下载功能
Column 'Column Name' does not belong to table Table
程序已被编译为DLL，怎样去修改程序功能
如何在Web网站实现搜索功能
如何把数据流转换为二进制字符串
Asp.net更新文件夹的文件
如何显示中文月份

原文地址：https://www.cnblogs.com/mymission/p/5777107.html