網(wǎng)頁制作中icon的任意用

網(wǎng)頁設(shè)計是一個很關(guān)鍵的部分，網(wǎng)頁設(shè)計的好壞直接影響整體的網(wǎng)站效果。網(wǎng)頁設(shè)計環(huán)節(jié)是整個成功的開端。無論是PC端網(wǎng)頁設(shè)計還是移動端頁面設(shè)計，很多開始加入ICON元素。一個ICON你就明白是什么意思，下面就有創(chuàng)新互聯(lián)為你介紹網(wǎng)頁設(shè)計中icon任意用。

什么是icon

icon是一種圖標(biāo)格式，用于系統(tǒng)圖標(biāo)、軟件圖標(biāo)等，這種圖標(biāo)擴(kuò)展名為*.icon、*.ico。

★在網(wǎng)頁設(shè)計中，在大多數(shù)情況下，我們都需要添加一些小圖標(biāo)，作為一個裝飾品，從而提高網(wǎng)頁的整體效果。然而，這些圖標(biāo)是要做的，是一個相對繁瑣的工作。

★如果是普通的圖標(biāo)，有很多的限制，如：像素，大小，顏色，縮放后等很多問題。除非有一些矢量圖標(biāo)來替換。

★尋找了很長一段時間，終于成功找到了一個解決這個問題的方法。今天免費送給大家。

★首先，打開百度搜索iconfont，排名第一的網(wǎng)站，就是我們今天的重點。這是阿里巴巴矢量圖標(biāo)庫。

★下一步單擊圖標(biāo)庫的左上角，有官方圖標(biāo)庫，以及其他上傳圖標(biāo)。選擇你的需要，喜歡的。

★點擊圖標(biāo)，添加到庫存之中。提醒一點，盡量在選擇圖標(biāo)時候，同類型先選擇，這樣庫存下來的文件它是在一起的，方便我們后期使用?！炯尤氲膱D標(biāo)會顯示在右上角的庫中，提示數(shù)量。】

★下一步點擊右上角 的庫，會看到你選中的圖標(biāo)。然后點擊下面的添加至項目。下載素材會下載單個的圖標(biāo)，我們需要的是庫，大量調(diào)用。因此不選擇此項。當(dāng)然你要是使用的少量，單個下載也可以。

★接下來會進(jìn)入到項目文件夾中，你添加的圖標(biāo)會在此處顯示，不去管它，我們點擊下載到本地。(會得到一個壓縮包，不用說，直接解壓!得到以下的文件。)

★打開demo就可以在瀏覽器中預(yù)覽你選中的圖標(biāo)，這里的demo實際上是沒有用的，只是在我們制作網(wǎng)頁中起一個參考的作用。因而不要刪除它。其它的文件也不要刪除，原原本本的放在那里。

★接下來就是要圖庫引用到網(wǎng)頁中，這里提供了三種引用方式?？梢愿鶕?jù)需要來引用。

1，font-class引用具有如下特點：

☆兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。

☆相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。

☆因為使用class來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時，只需要修改class里面的unicode引用。

☆不過因為本質(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

2，symbol引用這是一種全新的使用方式，應(yīng)該說這才是未來的主流，也是平臺目前推薦的用法。 這種用法其實是做了一個svg的集合，與另外兩種相比具有如下特點：

☆支持多色圖標(biāo)了，不再受單色限制。

☆通過一些技巧，支持像字體那樣，通過font-size，color來調(diào)整樣式。

☆兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器。

☆瀏覽器渲染svg的性能一般，還不如png。

3，unicode引用：unicode是字體在網(wǎng)頁端最原始的應(yīng)用方式，特點是：

兼容性最好，支持ie6+，及所有現(xiàn)代瀏覽器。

支持按字體的方式去動態(tài)調(diào)整圖標(biāo)大小，顏色等等。

但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標(biāo)，就算項目里有多色圖標(biāo)也會自動去色。

★兼容性上來看，第三種絕對是上上之選，但你要看清楚，他是不支持多色的。即便你選了顏色它也會自動去除，這對我們來說，是有缺陷的。同理第一種方法明顯也不行。那就只剩下第二種方法了。

★第一步：引入項目生成的symbol代碼：把下面的代碼放在head之間。

★第二步：加入通用css代碼(引入一次就行)

★第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面： 這里引用的就是前面demo下面圖標(biāo)對應(yīng)的名稱，主要要加上‘#’號!

★每次調(diào)用圖標(biāo)只需要加上第三步的代碼就可以了。其它不需要動它。最后親自測試可用。

★但是在實際情況iconfont”(font-family)你需要修改項目下的字體?？梢酝ㄟ^編輯項目視圖查看，默認(rèn)是“iconfont”。

★事實上，在引用上，個人覺得第三個參考的方式更方便，只需要定義我的標(biāo)簽。

★它更換的是這個：

★是不是比上面的方便許多。實際上這個我也測試過，使用：hover選擇器，還是可以改變顏色。所有，個人使用的是這個，主要是代碼精煉。看著起來更好

網(wǎng)頁制作中icon的任意用的文章

當(dāng)前題目：網(wǎng)頁制作中icon的任意用
URL鏈接：http://muchs.cn/news/168236.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站營銷、用戶體驗、ChatGPT、Google、App開發(fā)

廣告

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