iconfont的引入方法

Posted 2020-09-09 王树燚

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont"></i>

代码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文件下面

以上是关于iconfont的引入方法的主要内容，如果未能解决你的问题，请参考以下文章

React中在组件在引入iconfont(第三方js)

iconfont svg怎么引入？