Bootstrap中的Glyphicon 字體圖標


在Bootstrap框架中也為大家提供了近200個不同的icon圖片,而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。

復制代碼
 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8"> 
 5     <title>Bootstrap 實例</title>
 6     <!-- 包含頭部信息用於適應不同設備 -->
 7     <meta name="viewport" content="width=device-width, initial-scale=1">
 8     <!-- 包含 bootstrap 樣式表 -->
 9     <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
10   </head>
11 
12 
13   <body>
14     <div class="container">
15       <h2>圖標</h2>
16       <p>插入圖標:</p>      
17       <p>雲圖標: <span class="glyphicon glyphicon-cloud"></span></p>      
18       <p>信件圖標: <span class="glyphicon glyphicon-envelope"></span></p>            
19       <p>搜索圖標: <span class="glyphicon glyphicon-search"></span></p>
20       <p>打印圖標: <span class="glyphicon glyphicon-print"></span></p>      
21       <p>下載圖標:<span class="glyphicon glyphicon-download"></span></p>      
22     </div>
23 
24   </body>
25 
26 </html>
復制代碼

上面的運行代碼如下:

下面是部分

參考地址:http://www.bkjia.com/webzh/951332.html

 


免責聲明!

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



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