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"></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"></div> </body> </html>