網頁引用Font Awesome圖標

時間 2019-12-14

標籤網頁引用 font awesome 圖標欄目 HTML 简体版

原文原文鏈接

首先引入

方法一：將如下代碼粘貼到網頁HTML代碼的 <head> 部分.

[html] view plain copy

<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

方法二：複製整個 font-awesome 文件夾到您的項目中。在HTML的 <head> 中引用font-awesome.min.css。

[html] view plain copy

<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">

FONTAWESOME 圖標介紹（http://fontawesome.dashgame.com/）

FONTAWESOME 圖標（附碼錶）（http://www.bootcss.com/p/font-awesome/design.html）

Font-Awesome github 項目（https://github.com/FortAwesome/Font-Awesome）

若是不須要使用Font Awesome圖標默認的類，只是在CSS裏面使用圖標，以下圖：

[css] view plain copy

.icon:before {
content: '\f006';
font-family: FontAwesome;
}

只須要用@font-face在CSS裏面加載字體就OK，加載方法以下：

@font-face使用規則

[css] view plain copy

@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

取值說明

一、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如「font-family:"YourWebFontName";」

二、source:此值指的是你自定義的字體的存放路徑，能夠是相對路徑也能夠是絕路徑；

三、format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有如下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

四、weight和style:這兩個值你們必定很熟悉，weight定義字體是否爲粗體，style主要定義字體樣式，如斜體。

CSS中使用@font-face引入FontAwesome字體，能夠參考下載的font-awesome/css目錄下面的CSS文件頭部（注意url）

[css] view plain copy

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

相關標籤/搜索

每日一句

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