Bootstrap Glyphicons如何工作？

Question

我知道一些CSS和HTML的基礎知識，有時可以和他們一起工作，但我不是專業人員，而且我很好奇Bootstrap Glyphicons是如何工作的。我的意思是Bootstrap zip文件中沒有圖像，所以圖像從哪裏來？

Answer 1

在Bootstrap 2.x中，Glyphicons使用圖像方法 - 使用圖像，就像您在問題中提到的一樣。

與圖像方法的缺點是：

• 您不能更改的圖標的顏色
• ：我喜歡你不能改變圖標的​​背景顏色t增加圖標的大小

因此，不是Bootstrap 2.x中的glyphicons，很多人都使用了Font-awesome，因爲這個SVG圖標沒有這樣的限制。

在Bootstrap 3.x中，字形使用字體方法。

使用的字體來表示一個圖標具有使用圖像比優點：

• 可擴展 - 很好地工作，無論客戶端設備的分辨率
• 可以改變顏色的CSS
• 可以做一切傳統的圖標可以（例如更改不透明度，旋轉等）
• 可以添加筆劃，漸變，陰影等
• 轉換爲文本（帶連字）
• 連字都通過屏幕閱讀器
• 更改圖標，字體，閱讀是改變字體家庭在CSS

你可以看到你可以與圖標here字體方法做什麼一樣簡單。

所以在引導分佈，可以看到glyphicon字體文件：

fonts\glyphicons-halflings-regular.eot 
fonts\glyphicons-halflings-regular.svg 
fonts\glyphicons-halflings-regular.ttf 
fonts\glyphicons-halflings-regular.woff 

的引導CSS指glyphicon字體，像這樣：

@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('../fonts/glyphicons-halflings-regular.eot'); 
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 
} 

而CSS鏈接到本字體使用.glyphicon基類（注意font-family）：

.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    ... 
} 

然後，每個圖形符號使用在Glyphicon Halflings字體內引用Unicode reference的單個圖標類，例如，：

.glyphicon-envelope:before { 
    content: "\2709"; 
} 

這就是爲什麼你必須在引導3使用基.glyphicon類以及單獨圖標類對span元素：

<span class="glyphicon glyphicon-envelope"></span>