亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS小技巧（一）：iconfont的使用

baiy / 1762人閱讀

摘要：已經(jīng)被添加入庫的圖標會以虛線框起來，以鑒別是否重復(fù)選取。點擊右上角的購物車小圖標，選擇添加至項目。創(chuàng)建項目并加入此新項目。將代碼引入頁面中，一般放在標簽內(nèi)即可。這是一種最新的引入方式，也是未來主流的方式。

在我們使用CSS對頁面進行編輯布局時，經(jīng)常會用到一些小圖標或者logo。
常見的比如我們在制作個人主頁時，使用超鏈接圖標來跳轉(zhuǎn)到你的微博或其他頁面等。這時候就會有一個很困擾的問題：去哪里“找”這些圖標呢？

不外乎兩種：
自己通過專業(yè)的軟件來切圖或繪制，需要有一定的了解；
其次，就是“找現(xiàn)成的”。

但是網(wǎng)上的logo和圖片樣式各異，像素層次不齊，很難收集到有用的信息。
我們在寫CSS時需要用到很多的工具或者工具類網(wǎng)站，今天就為大家介紹一個專門采集各種圖標的網(wǎng)站和使用的教程：

http://www.iconfont.cn
阿里巴巴矢量圖標庫

登錄與搜索

首先進入主頁，點擊右上角的登錄，推薦使用GitHub登錄。

在搜索框內(nèi)輸入你想要找到的圖標，比如："weibo"。

出現(xiàn)了很多關(guān)于微博的圖標，這里我們點擊第三行第一個"weibo"，鼠標挪動選擇第一個“添加入庫”。
已經(jīng)被添加入庫的圖標會以虛線框起來，以鑒別是否重復(fù)選取。

我們再搜索幾個自己需要的圖標并以此添加入庫。

點擊右上角的購物車小圖標，選擇添加至項目。創(chuàng)建項目并加入此新項目。

在我的項目頁面，選擇格式"Symbol"——查看在線鏈接——暫無代碼，點此生成。

將代碼引入html頁面中，一般放在head標簽內(nèi)即可。

這是一種最新的引入方式，也是未來主流的方式。
再加入通用CSS代碼，一次即可。

這時候就可以通過添加svg標簽放在合適的位置，來代替img標簽引用圖標了。
還可以通過font-size,color來調(diào)整樣式。

我們可以點擊圖標浮動信息底部的“復(fù)制代碼”來替換"#icon-xxx"。

首頁還有管理圖標、項目等眾多功能，總體來說是一個非常實用的CSS獲得矢量圖標的工具網(wǎng)站。即美觀，又節(jié)省時間。



Wrtten by：EdenSheng
Email：singlesaulwork@gmail.com

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/117037.html

相關(guān)文章

  • iconfont實踐小結(jié)

    摘要：所以實現(xiàn)小圖標時雪碧圖跟圖標字體會在一個網(wǎng)站共存，自定義圖標字體為什么比較耗時，且太復(fù)雜圖標無法實現(xiàn)請往下看開發(fā)流程就了解了。參考資料細談淺談圖標字體向下兼容優(yōu)雅降級技術(shù)繪制小圖標技巧雪碧圖圖標字體矢量小圖標設(shè)計本文對應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關(guān)于雪碧圖的博文，...

    bitkylin 評論0 收藏0

  • img/background/iconfont---誰最適合你？

    摘要：在所有的網(wǎng)站優(yōu)化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現(xiàn)的，并使用進行合并?？梢詼p少請求，還可以配合離線存儲做性能優(yōu)化。創(chuàng)作自已的字體圖標很費時間，重構(gòu)人員后期維護的成本偏高。 前言 第一篇文章，小弟先做一番自我介紹^ω^姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業(yè)生，大四前的暑假起對web前端產(chǎn)生興趣并有半年實習經(jīng)驗。ng...

    icyfire 評論0 收藏0

  • img/background/iconfont---誰最適合你？

    摘要：在所有的網(wǎng)站優(yōu)化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現(xiàn)的，并使用進行合并?？梢詼p少請求，還可以配合離線存儲做性能優(yōu)化。創(chuàng)作自已的字體圖標很費時間，重構(gòu)人員后期維護的成本偏高。 前言 第一篇文章，小弟先做一番自我介紹^ω^姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業(yè)生，大四前的暑假起對web前端產(chǎn)生興趣并有半年實習經(jīng)驗。ng...

    tinyq 評論0 收藏0

  • iconfont的使用方法(更新了一些內(nèi)容）

    摘要：方式和方式是極其相似的，只不過他們一個用的是圖標的字體編碼，一個用的是圖標的引用而已是使用了引用的類名，可在下載的中查看，或者可以在阿里矢量圖標庫的網(wǎng)站上，進入我的項目查看。 字體圖標iconfont阿里官網(wǎng)傳送門： http://www.iconfont.cn/打開首頁的小圖標好漂亮哦1）showImg(https://segmentfault.com/img/bVbghOc?w=1...

    tianlai 評論0 收藏0

  • 小程序開發(fā)技巧總結(jié)

    摘要：前言最近公司要開發(fā)一款電商小程序，匆忙看了一遍文檔就開始干活了。整體開發(fā)體驗個人感覺不太好，特別是如果之前習慣了開發(fā)，突然去開發(fā)小程序，感覺很雞肋。 前言 最近公司要開發(fā)一款電商小程序，匆忙看了一遍文檔就開始干活了。整體開發(fā)體驗個人感覺不太好，特別是如果之前習慣了Vue開發(fā)，突然去開發(fā)小程序，感覺很雞肋。以下是我在開發(fā)中遇到的一些問題以及解決方法的總結(jié)，僅供參考 引入iconfont ...

    Wuv1Up 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<