字體圖標(biāo)不僅可以隨意調(diào)整大小，而且可以避免在頁(yè)面制作過(guò)程中引用N多的圖片，發(fā)送請(qǐng)求造成的流量浪費(fèi)，因此，我們可以將圖標(biāo)的icon轉(zhuǎn)換成字體圖標(biāo)：

方法一：

1.將png格式的圖片轉(zhuǎn)換成svg格式；

網(wǎng)址：https://www.jinaconvert.com/cn/convert-to-svg.php

2.將svg格式的圖標(biāo)轉(zhuǎn)成字體圖標(biāo)：

網(wǎng)址：https://icomoon.io/app/#/select

具體步驟：

1 點(diǎn)擊右上角 IconMoon App 進(jìn)入WebApp
2 點(diǎn)擊左上角 Import Icons 批量倒入之前已經(jīng)轉(zhuǎn)成 svg 的圖標(biāo)文件
3 點(diǎn)擊選中所倒進(jìn)來(lái)的圖標(biāo)，也可以點(diǎn)擊右邊的 menu 圖標(biāo)全選
4 點(diǎn)擊右下角 Generate Fonts 生成圖標(biāo)
5 點(diǎn)擊右下角已經(jīng)變成 Download 的按鈕，下載 iconfonts 壓縮包

3.將下載的壓縮包中的style.css和fonts這個(gè)文件夾copy到樣式文件夾，在需要使用字體圖標(biāo)的頁(yè)面中，根據(jù)路徑引入style.css

4.使用：

<span class="icon-about">

方法二：

在https://www.iconfont.cn/中，在你所生成的項(xiàng)目中，直接將svg圖片拖入，生成字體圖標(biāo)；

總結(jié)

以上是生活随笔為你收集整理的将png图片转换为字体图标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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