将png图片转换为字体图标
生活随笔
收集整理的這篇文章主要介紹了
将png图片转换为字体图标
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
字體圖標(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)題。
- 上一篇: VS中文档大纲视图的作用
- 下一篇: 理财app排行榜前十名,理财平台名单一览