昨天到今天一直在作一個做業,遇到了不少按鈕前面須要有一個相似於css
的圖標加字體,以前遇到這種的作法就是用截圖而後用圖片加字體的方式排列出來。昨天正式開始使用boostrap以後發現了iconfont的使用。html
但網上的教程都好不詳細,致使我昨晚沒有試驗成功,今早成功以後,立刻來更一篇無比詳細的教程。前端
首先來說一下什麼是iconfonts:字體圖標是在 Web 項目中使用的圖標字體。以前看到W3C裏提到了webfonts的應用,可能之後webfont的使用會更加普遍。web
下面是安裝使用教程:瀏覽器
第一步:下boostrap的時候裏頭會帶着一個默認的fonts包叫作svg
看到沒有,第三個就是默認自帶的font包。我就使用的是這個,其餘的本身下載的使用方式和這個應該是同樣的。字體
第二步:把這個font中的文件夾引入到你的項目中url
我是這樣作的。spa
這裏要說一下爲何要引入這麼多文件呢?orm
由於兼容性咯,不一樣版本的瀏覽器對iconfont的支持性不同,因此須要單獨聲明和引入不一樣的font文件。這裏不由要吐槽一句,爲何不能給瀏覽器統一標準,統一標準不就沒有兼容性問題了麼。
第三步:單獨創建一個icon.css樣式表,在html文件中引入,這個不用詳細說了吧。
而後在css文件中寫上以下內容:(能夠直接複製,但有一點要注意是url的問題,必定要保證是正確的地址)
@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');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon:empty {
width: 1em;
}
第四步:
固然就是使用了,我這裏用一個例子:
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-tags"></span> 上傳稿件
</a>
就是我最開始的截圖裏的按鈕式的一個圖標字體。
Ok,寫完啦~我要繼續求作歡樂的小前端碼農啦~