AwesomeFont及伪元素混合应用方法汇编

1.第一种方法:引入css，或者cdn css或者本地css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudo Element</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<p><span class="fa">&#xf1ac</span>11111111111111</p>
<p><i class="fa fa-fax"></i>11111111111111</p>
</body>
</html>

2.第二种方法:

首先做一个css文件,假设文件名为:fontCss.css

@charset "utf-8";
/* CSS Document */
@font-face{
    font-family:"fontawesome";
    src:url(font-awesome-4.7.0/fonts/fontawesome-webfont.eot);
    src:url(font-awesome-4.7.0/fonts/fontawesome-webfont.woff);
    src:url(font-awesome-4.7.0/fonts/fontawesome-webfont.svg);
    src:url(font-awesome-4.7.0/fonts/fontawesome-webfont.ttf);
    src:url(font-awesome-4.7.0/fonts/fontawesome-webfont.woff2);
    src:url(font-awesome-4.7.0/fonts/FontAwesome.otf);
}

然后,把上述的css文件引入到下方的html文件中,

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudo Element</title>
<link rel="stylesheet" type="text/css" href="fontCss.css">
<style type="text/css">
p:before {
  content: "f1ac";
  font-family:fontawesome;  
}
.myfont{
     font-family:fontawesome;  
}
</style>
</head>
<body>
<p>11111111111111</p>
<div class="myfont">&#xf1ac</div>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/exesoft/p/12846471.html