首頁 >web前端 >Bootstrap教程 >bootstrap字體圖示怎麼引用

bootstrap字體圖示怎麼引用

藏色散人
藏色散人原創
2020-11-25 11:15:384203瀏覽

bootstrap字體圖示的引用方法:先建立一個fonts資料夾;然後放在和js、css檔案同級目錄下;最後透過「src: url('font/glyphicons-halflings-regular.eot ');”方式引用字體圖示即可。

bootstrap字體圖示怎麼引用

本教學操作環境:Windows7系統、bootstrap3版,此方法適用於所有品牌電腦。

推薦:《bootstrap教學

Bootstrap正確引用字體圖示:

##補充:

其實不需要下面這麼麻煩,只要建一個fonts資料夾放在和js,css檔案同級目錄下,就可以正確引用,關鍵是下面這幾個檔案得有:

第一種(字體檔案的路徑請靈活改變)

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

第二種

<!--<style type="text/css">
            @font-face {
    font-family: 'Glyphicons Halflings';
    src: url('font/glyphicons-halflings-regular.eot');
    src: url('font/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
          url('font/glyphicons-halflings-regular.woff') format('woff'), 
          url('font/glyphicons-halflings-regular.ttf') format('truetype'),
          url('font/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
   }

 注意:用font-size屬性調整字體圖示的大小,且不會失真。

更多程式相關知識,請造訪:

程式設計學習! !

以上是bootstrap字體圖示怎麼引用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn