在網頁中使用icon圖標：png、svg、iconfont

本文轉載自查看原文 2019-06-22 11:54 2479 CSS

在寫個人簡歷時，好多地方都用到了各式各樣的icon圖標，不僅是為了樣式的美觀，更是能夠為訪客提供很好的指引，比如：

放上這些圖標，總比干巴巴的 ‘點擊右側進入詳情’ 好⑧

（在做簡歷網站的時候，本來是想用svg一把梭的，簡單好用，也不知道為啥突然覺得，哎，都用了這么久svg了，試試png吧:) 結果一發不可收拾，大概二十多張png圖片，還沒有用雪碧圖，我腦殼痛）

（還是建議用下面提到的svg或者iconfont+css/html吧）

方式1：png/jpg...

這個就不用多說了，放在span里調下定位就好。

方式2：svg

關於svg的概念我就不多講了，也講不太來。只需要知道它是可縮放矢量圖形的簡稱，啥是矢量圖形？就是用點和線來描述圖形。

復制的優點：

　　1．任意放縮。

　　　　用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。

　　2．文本獨立。

　　　　SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。

　　3．較小文件。

　　　　總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。

　　4．超強顯示效果

　　　　SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨力和打印分辨力。

舉個例子，這張icon的svg代碼：

<svg t="1561173335388" class="icon" viewBox="0 0 1204 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 
p-id="10448" width="128" height="128"><path d="M959.007925 563.802353v153.419294c0 169.020235-133.360941 306.778353-297.923765
 306.778353h-37.345882c-258.770824 0-469.052235-216.124235-469.052236-481.400471V483.689412c0-266.480941 210.221176-483.689412 
469.052236-483.689412h8.854588c99.930353 0 183.115294 74.330353 200.161882 172.333176h181.549177c105.291294 0 190.403765 87.943529 
190.403764 195.764706s-85.112471 195.764706-190.403764 195.764706h-55.296z m-60.235294 153.419294V503.567059h115.531294C1085.863454 
503.567059 1144.472395 443.030588 1144.472395 368.037647c0-74.932706-58.608941-135.469176-130.16847-135.469176h-237.568l-1.084236-28
.973177C772.639925 123.482353 709.272395 60.235294 632.592866 60.235294h-8.854588C398.638984 60.235294 214.921336 250.036706 214.921336 
483.689412v58.910117c0 232.327529 183.717647 421.165176 408.816942 421.165177h37.345882c130.831059 0 237.688471-110.351059 237.688471-24
6.543059z m-237.688471 187.331765c99.147294 0 180.344471-83.968 180.344471-187.392V504.048941c0-32.768 26.021647-59.693176 58.729411-59.6
93176h114.145883c39.936 0 72.884706-34.032941 72.884706-76.257883 0-42.285176-32.948706-76.257882-72.884706-76.257882h-447.548236a59.271
529 59.271529 0 0 1-58.729411-59.693176c0-32.707765 26.021647-59.693176 58.729411-59.693177h144.082824a86.016 86.016 0 0 0-78.245647-52
.826353h-8.854588c-193.475765 0-351.472941 163.237647-351.472942 364.182588v58.910118c0 196.547765 153.118118 356.894118 342.558118 361.
773176h46.260706z m-37.345882 60.295529c-227.147294 0-411.708235-189.560471-411.708236-422.128941v-58.910118c0-233.773176 184.500706-424.
417882 411.708236-424.417882h8.854588c77.763765 0 141.552941 62.524235 145.889882 141.552941l1.686588 30.659765h234.134589c73.667765 0
 133.12 61.44 133.12 136.493176s-59.452235 136.493176-133.12 136.493177h-112.64v212.570353c0 136.312471-107.700706 247.567059-240.579765 
247.567059h-7.228235l-30.117647 0.12047zM117.460631 893.530353a59.271529 59.271529 0 0 1-58.729412 59.753412 59.211294 59.211294 0 0 1
-58.729412-59.632941V148.781176c0-32.707765 26.142118-59.632941 58.729412-59.632941 32.647529 0 58.729412 26.864941 58.729412 59.63
2941v744.688942z" p-id="10449"></path></svg>

長的很，對⑧？

但是誰讓人家優點那么多呢，最重要的是使用class處理svg圖片的樣式的時候非常快捷，這是png等位圖格式比不了的。（就好像你能用css調png圖片顏色嗎？）

如何調整svg圖片的大小/顏色？

並不是在加個類名然后在style里改

注意fill屬性，顏色是在這里調整的，而寬高則是在svg標簽中修改width與height屬性.

(上面這個例子是由兩個svg圖片組合成的)

PS：阿里的iconfont圖標庫已經有了復制SVG的功能

方式3：

iconfont+css：

注意，這里的iconfont不是阿里的圖標庫名稱，是...一種描繪圖標的字體（我這么理解）？

它不需要導入svg代碼，也不用png圖片：

來看看例子，代碼：

<style> @font-face{ font-family: 'iconfont-css'; src: url("../icomoon (4)/fonts/icomoon.ttf") format('truetype'); font-weight: normal; font-style: normal;
    } .iconfont-css{ display: inline-block;
    } .iconfont-css::before{ content: '\e900'; font-size: 32px; font-family: 'iconfont-css';
    }
</style>
<body>
    <span><i class="iconfont-css">GayHub</i></span>