字體圖標(biāo)的用法

字體圖標(biāo)網(wǎng)站:
醉牛前端:http://f2er.club/
阿里巴巴圖標(biāo)庫(kù):http://www.iconfont.cn/
制作字體圖標(biāo)網(wǎng)站:https://icomoon.io/ (以該網(wǎng)站為例子)

  1. 生成字體圖標(biāo):
    第一步:點(diǎn)擊右上角的紫色圖標(biāo)


    12.png

    第二步:直接選擇(單擊)想要的圖標(biāo) -->制作成-->字體(點(diǎn)擊右下角Grenerate Font )


    13.png

    第三步:或者導(dǎo)入自己的圖標(biāo)(點(diǎn)擊左上角 import incons) -->制作成-->字體


    15.png

    第四步:點(diǎn)擊右下角的download(下載)

    第五步:解壓后苹祟,font文件夾里面的字體哩簿,就是我們想要的字體圖標(biāo)


    16.png

    到此我們已經(jīng)成功將圖片變成字體圖標(biāo)

  2. 使用字體圖標(biāo)
    第一步:查看圖標(biāo)對(duì)應(yīng)的字體編碼:在demo.html文件中查看


    18.png

    第二步:


    17.png

    執(zhí)行效果:


    19.png

    源代碼:
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
    
     <style>
    
     /* 定義一個(gè)叫做“xmg”字體摆出,引用多種字體的目的是適配各種機(jī)型 */
     @font-face {
         font-family: 'xmg';
         src: url('font/icomoon.eot') format('embedded-opentype'),
         url('font/icomoon.svg') format('svg'),
         url('font/icomoon.ttf') format('truetype'),
         url('font/icomoon.woff') format('woff');
     }
     
     /*匹配以icon-開(kāi)頭的class*/
     [class^='icon-'],
    
     /*匹配存在icon-字符串class*/
     [class*='icon-']{
         font-family: xmg;
         font-style: normal;
     }
    
     i::before{
         content: '\e901';
     }
     span::before{
         content: '\e91a';
     }
     div::before{
         content: '\e90f';
     }
     </style>
     </head>
     <body>
          <i class="icon-i">在i之前添加字體圖標(biāo)</i>
          <span class="icon-span">在sapn之前添加字體圖標(biāo)</span>
          <div class="icon-div">在div之前添加字體圖標(biāo)</div>
     </body>
     </html>
    

字體文件格式
eot : embedded-opentype
svg : svg
ttf : truetype
woff : woff

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子吴超,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宙项,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡株扛,警方通過(guò)查閱死者的電腦和手機(jī)尤筐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)洞就,“玉大人盆繁,你說(shuō)我怎么就攤上這事⊙” “怎么了油昂?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)倾贰。 經(jīng)常有香客問(wèn)我冕碟,道長(zhǎng),這世上最難降的妖魔是什么匆浙? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任安寺,我火速辦了婚禮,結(jié)果婚禮上首尼,老公的妹妹穿的比我還像新娘挑庶。我一直安慰自己,他們只是感情好饰恕,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布挠羔。 她就那樣靜靜地躺著,像睡著了一般埋嵌。 火紅的嫁衣襯著肌膚如雪破加。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 50,084評(píng)論 1 291
  • 那天雹嗦,我揣著相機(jī)與錄音范舀,去河邊找鬼合是。 笑死,一個(gè)胖子當(dāng)著我的面吹牛锭环,可吹牛的內(nèi)容都是我干的聪全。 我是一名探鬼主播,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼辅辩,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼难礼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起玫锋,我...
    開(kāi)封第一講書(shū)人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤蛾茉,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后撩鹿,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體谦炬,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年节沦,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了键思。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡甫贯,死狀恐怖吼鳞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情叫搁,我是刑警寧澤赖条,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布,位于F島的核電站常熙,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏碱茁。R本人自食惡果不足惜裸卫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望纽竣。 院中可真熱鬧墓贿,春花似錦、人聲如沸蜓氨。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)穴吹。三九已至幽勒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間港令,已是汗流浹背啥容。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工锈颗, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人咪惠。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓击吱,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親遥昧。 傳聞我的和親對(duì)象是個(gè)殘疾皇子覆醇,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容

  • 1、屬性選擇器:id選擇器 # 通過(guò)id 來(lái)選擇類名選擇器 . 通過(guò)類名來(lái)選擇屬性選擇器 ...
    Yuann閱讀 1,621評(píng)論 0 7
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理炭臭,服務(wù)發(fā)現(xiàn)永脓,斷路器,智...
    卡卡羅2017閱讀 134,638評(píng)論 18 139
  • 首先說(shuō)明,我是web前端開(kāi)發(fā)的新手凿试,高手忽噴排宰!。最近開(kāi)發(fā)一個(gè)微信商城那婉,要用到很多圖標(biāo)板甘,之前我都是用@×2雪碧圖。但...
    Cola丶ZYQ閱讀 2,170評(píng)論 1 2
  • 我今天撿了一個(gè)神奇的盒子详炬,我打開(kāi)它竟穿越了時(shí)空盐类,到了未來(lái)的世界。天吶呛谜!我簡(jiǎn)直不相信自己的眼睛在跳,這是我看到的嗎...
    淺淺的簡(jiǎn)書(shū)閱讀 576評(píng)論 0 0