如何在頁面上放置我們需要的圖標，這個問題從我學習前端以來便一直伴隨著我，從開始的全部用img標簽來放圖標到之后的用雪碧圖，用字體，但是再多的方法也要懂得如何在不同的情形下去使用這些方法。所以剛在加班中過完圣誕的我坐在了電腦前，想要對這些熟悉而又陌生的東西進行整理和總結(jié)。

首先是從img標簽說起，當我第一次切圖時便和它邂逅，當時覺得好神奇，給它一個路徑居然可以找到我想要的圖片，并且展示出來，功能有點類似于快遞員，于是我開始頻繁的收各種快遞，用到圖片的地方都選擇使用它。雖然這么做并不算錯，但很顯然不是任何時候都可以用的，也有一些問題需要注意，一個img標簽就代表了一個請求，而當網(wǎng)頁上存在大量的圖標時，請求數(shù)也隨之提升，但是瀏覽器的并發(fā)請求數(shù)是有限制的，請求當然是越少越好，這也是網(wǎng)站優(yōu)化時需要重點解決的問題，尤其是對于類似淘寶那樣的網(wǎng)站，圖標數(shù)量巨大，大量使用img標簽是不可能的。

這時，就需要用到雪碧圖，他的原理十分簡單，把很多個圖標放在一起，做成一張圖片，然后通過CSS的background-image和background-position屬性控制它的位置，讓它顯示我們需要的內(nèi)容，使用時還是需要注意幾點：①標簽需要指定寬高，因此最好使用塊級元素。②由于無法控制圖標大小，對于需要自適應的圖片不適用。

另外還有就是雪碧圖的制作比較繁瑣，對于我這樣手殘的程序猿簡直是折磨，幸好像gulp這些工具都有生成雪碧圖的插件，而且還會生成CSS樣式，但是位置有時候不太合適，調(diào)整起來需要點耐心。

最后還有一種方法，就是用font-face，也就是自定義字體，它和雪碧圖有些相似的的地方，尤其是制作起來非常麻煩，還沒有什么可以用的工具，甚至為了做字體我還專門去下載了一個做字體的軟件，過程大概是這個樣子：

1.準備工作：字體制作軟件，字體文件。

2.用軟件打開準備好的字體文件。

3.找到合適的矢量圖標，下載下來，放到字體文件當中，可以在軟件中查看到圖標的編碼。

4.保存字體文件，再用網(wǎng)上的字體轉(zhuǎn)換工具得到不同格式的字體文件，通常還會有一個CSS文件，里面有自定義字體的CSS代碼，或者也可以自己寫。

@font-face {font-family: 'emotion';src: url('emotion.eot'); /* IE9*/src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('emotion.woff') format('woff'), /* chrome、firefox */url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */}

5.把上面的CSS代碼放入你的CSS文件，然后在需要用到圖標的地方引用定義的字體，并且內(nèi)容用圖標的編碼代替。

.icon:after, .icon::after{font-family:"emotion" Tahoma;display:inline-block;content:"i";/*在這里調(diào)用字符*/width:16px;height:16px;margin-left:-16px;/*position:absolute什么的也可以，看具體情況*/ }

6.最后在瀏覽器上調(diào)整一下就行了。

7.如果有什么簡單的方法或者工具請忽略上述步驟，順便指點我一下，跪謝！

做完這些終于可以在網(wǎng)頁上看到圖標了，它比起雪碧圖的優(yōu)勢在于可以設置圖標大小，但是無法設置比例，，可以任意改變顏色，所以個人感覺比較適合用于移動端上的需要自適應圖標而雪碧圖只能通過不同的圖片來切換。而且文件也不大，兼容性也好。

使用場景的話和雪碧圖相比，它適合用于純色的矢量圖，維護起來非常麻煩，有可能需要改動的地方最好別用，還有如果項目趕時間就算了，用雪碧圖吧。

轉(zhuǎn)載于:https://www.cnblogs.com/yxyblogs/p/5079223.html

總結(jié)

以上是生活随笔為你收集整理的前端菜鸡之路——网页上的图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。