zoukankan html css js c++ java

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>

查看全文

相关阅读:
子类继承和调用父类的构造方法（转）
数组复制 System.arraycopy 与 Arrays.copyof()
ArrayList的使用方法（转）
Eclipse 的debug 用法（转）
for each
二维数组排序随机数练习
 react 之 reflux 填坑
 react & vue 项目创建的方式
 数组实例的 copyWithin()
es6的正则扩展笔记之修饰符

原文地址：https://www.cnblogs.com/exesoft/p/12846471.html