這篇文章主要為大家展示了“如何制作和使用css字體圖標”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何制作和使用css字體圖標”這篇文章吧。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供瑞麗企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站設計、成都網(wǎng)站建設、H5場景定制、小程序制作等業(yè)務。10年已為瑞麗眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡公司優(yōu)惠進行中。

css字體圖標的制作和使用

在項目開發(fā)的過程中，我們會經常用到一些圖標。但是我們在使用這些圖標時，往往會遇到失真的情況，而且圖片數(shù)量很多的話，頁面加載就越慢。所以，我們可以使用字體圖標的方式來顯示圖標，既解決了失真的問題，也解決了圖片占用資源的問題。

一、如何制作字體圖標

1、上網(wǎng)下載需要的圖標（svg格式）,在這里推薦一個網(wǎng)站 "阿里巴巴圖標庫",這里面幾乎囊括了網(wǎng)站制作中所有需要的圖標，而且是免費下載，（格式，大小，顏色都可以自定義）。

阿里巴巴圖標庫的地址：https://www.iconfont.cn/

2、我們打開“iconmoon”這個網(wǎng)站（當然阿里巴巴圖標庫這個網(wǎng)站也可以制作）

https://icomoon.io/

找到右上角這個紅色的按鈕，點擊它

3、找到左上角這個按鈕，點擊import icons這個按鈕，上傳你的svg格式的圖標。

4、當圖標上傳完后，圖標的背景是灰色的，這個時候點擊你需要的圖標（選中后的背景會變白）。

5、點擊頁面右下角的

這個按鈕，跳轉頁面后，再點擊

這個下載按鈕，等待下載完成。

二、如何使用字體圖標

1、解壓下載后的文件夾，我們需要的是fonts文件夾和style.css, 將這個文件放入你的項目中,style.css文件中引入了字體文件，所以會有路徑，這個時候你在使用的時候要注意路徑問題，代碼如下：（這里的多種字體文件是為了兼容瀏覽器）

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?snsrp8');
  src:  url('../fonts/icomoon.eot?snsrp8#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?snsrp8') format('truetype'),
    url('../fonts/icomoon.woff?snsrp8') format('woff'),
    url('../fonts/icomoon.svg?snsrp8#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

2、在頁面中，我們只要給一個元素添加相應的類名就行，因為在style.css中已經將類名對應的圖標寫好了。

.icon-account:before {
content: "\e900";
}
.icon-caifu:before {
content: "\e901";
}
.icon-edit:before {
content: "\e902";
}

頁面中添加如下類似元素：

<span class="icon-account"></span>

這樣，我們的頁面中就可以顯示相應的圖標了。

注意：在某些小米手機上可能有些圖標不會顯示：

二：使用阿里的iconfont：

1、找到網(wǎng)站，搜索需要的圖標

2、將圖片加入購物車，點擊頁面右上角的購物車按鈕，將所有圖標添加到自定義項目中。

3、在彈出的頁面中，點擊下載至本地。

以上是“如何制作和使用css字體圖標”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：如何制作和使用css字體圖標
本文URL：http://jinyejixie.com/article26/jjjdjg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿建站、微信公眾號、網(wǎng)站導航、做網(wǎng)站、網(wǎng)站營銷、

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)