FontAwesome的正确简单使⽤⽅法
⽹上看了许多的Font Awesome使⽤介绍，都是要引⽤Font-Awesome.css⽂件，还需要把整个Font Awesome⽂件都拷贝到项⽬中，这样不仅容错率极
低，⼀旦不⼩⼼把⽂件路径改了，整个项⽬的icon部分就挂掉了。⽽且其中的很多⽂件其实根本使⽤不到，⽩⽩浪费服务器内存，也不便于后期⽹站的维
护，下⾯将介绍Font Awesome的正确使⽤⽅法。
要使⽤Font Awesome，我们先要理解Font Awesome图标库的原理，⾸先，⼀个字体中是存在特殊符号的，例如⽹页底部常见的©的编码就
是©。⽽Font Awesome本质上是把图标做成了字体⽂件，⼀个图标代表⼀个特殊符号，因此我们需要这个图标的话只需要引⽤这个字体⽂件就好了
⾸先来做⼀个demo页⾯
<!DOCTYPE html>
<html>
<head>
<title>name</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
</body>
</html>
接着到Font Awesome内的字体⽂件
把这些字体拷贝到你的⽹页⽂件夹中，这⾥建议建⽴⼀个单独的字体⽂件夹，因为⼀个项⽬中很可能⽤到不⽌⼀个字体。
接下来要做的，就是在css中引⽤字体⽂件了（注，字体的具体路径根据情况⾃⾏修改）
css代码：
@font-face {
font-family: 'FontAwesome';
src: url('../?v=4.7.0');
src: url('../?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../f?v=4.7    font-weight: normal;
font-style: normal;
}
然后，就可以在⽹页中插⼊你想要的图标了。
到图标的名称
在fontawesome⽂件夹⾥到font-awesome.css并打开
可以看到，刚才要的图标的编码为f2b9，其实实际编码为；此时就可以在html⽂件中直接使⽤这个字符了HTML代码：
<!DOCTYPE html>
icon图标库
<html>
<head>
<title>name</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<link href="css/common.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<body>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</body>
</body>
</html>
css代码：
.
icon{
font-family: FontAwesome;
}
这样，就将图标引⼊到页⾯中了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。