網上看了許多的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('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#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('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
然後,就可以在網頁中插入你想要的圖標了。
找到圖標的名稱
在fontawesome文件夾裏找到font-awesome.css並打開
可以看到,剛纔要找的圖標的編碼爲f2b9,其實實際編碼爲此時就可以在html文件中直接使用這個字符了
HTML代碼:
<!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/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;
}
這樣,就將圖標引入到頁面中了