網頁引用Font Awesome圖標


首先引入

方法一:將以下代碼粘貼到網頁HTML代碼的 <head> 部分.
[html]  view plain  copy
 
  1. <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
 
  1. <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
 
  1. .icon:before {  
  2.     content: '\f006';  
  3.     font-family: FontAwesome;  
  4. }  
只需要用@font-face在CSS里面加載字體就OK,加載方法如下:
 
@font-face使用規則
[css]  view plain  copy
 
  1. @font-face {  
  2.    font-family: <YourWebFontName>;  
  3.    src: <source> [<format>][,<source> [<format>]]*;  
  4.    [font-weight: <weight>];  
  5.    [font-style: <style>];  
  6.  }  
取值說明

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

2、source:此值指的是你自定義的字體的存放路徑,可以是相對路徑也可以是絕路徑;

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

4、weight和style:這兩個值大家一定很熟悉,weight定義字體是否為粗體,style主要定義字體樣式,如斜體。
 
CSS中使用@font-face引入FontAwesome字體,可以參考下載的font-awesome/css目錄下面的CSS文件頭部(注意url)
[css]  view plain  copy
 
  1. @font-face {  
  2.   font-family: 'FontAwesome';  
  3.   src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');  
  4.   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');  
  5.   font-weight: normal;  
  6.   font-style: normal;  
  7. }  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM