Font Awesome的正確簡單使用方法

時間 2019-11-11

標籤 font awesome 正確簡單使用方法简体版

原文原文鏈接

網上看了許多的Font Awesome使用介紹，都是要引用Font-Awesome.css文件，還須要把整個Font Awesome文件都拷貝到項目中，這樣不只容錯率極低，一旦不當心把文件路徑改了，整個項目的icon部分就掛掉了。並且其中的不少文件其實根本使用不到，白白浪費服務器內存，也不便於後期網站的維護，下面將介紹Font Awesome的正確使用方法。css

要使用Font Awesome，咱們先要理解Font Awesome圖標庫的原理，首先，一個字體中是存在特殊符號的，例如網頁底部常見的©的編碼就是&#169。而Font Awesome本質上是把圖標作成了字體文件，一個圖標表明一個特殊符號，所以咱們須要這個圖標的話只須要引用這個字體文件就行了
html

首先來作一個demo頁面web

<!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內的字體文件服務器

把這些字體拷貝到你的網頁文件夾中，這裏建議創建一個單獨的字體文件夾，由於一個項目中極可能用到不止一個字體。svg

接下來要作的，就是在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;
   }

而後，就能夠在網頁中插入你想要的圖標了。ui

找到圖標的名稱編碼

在fontawesome文件夾裏找到font-awesome.css並打開url

能夠看到，剛纔要找的圖標的編碼爲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">&#xf2b9</div>
                <div class="icon">&#xf2b9</div>
                <div class="icon">&#xf2b9</div>
                <div class="icon">&#xf2b9</div>
                <div class="icon">&#xf2b9</div>
        </body>
</body>


</html>

css代碼：

.icon{
       font-family: FontAwesome;
   }

這樣，就將圖標引入到頁面中了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。