2022-06-17 分類: 網站建設
網頁設計是一個很關鍵的部分,網頁設計的好壞直接影響整體的網站效果。網頁設計環節是整個成功的開端。無論是PC端網頁設計還是移動端頁面設計,很多開始加入ICON元素。一個ICON你就明白是什么意思,下面就有創新互聯為你介紹網頁設計中icon任意用。
icon是一種圖標格式,用于系統圖標、軟件圖標等,這種圖標擴展名為*.icon、*.ico。
★在網頁設計中,在大多數情況下,我們都需要添加一些小圖標,作為一個裝飾品,從而提高網頁的整體效果。然而,這些圖標是要做的,是一個相對繁瑣的工作。
★如果是普通的圖標,有很多的限制,如:像素,大小,顏色,縮放后等很多問題。除非有一些矢量圖標來替換。
★尋找了很長一段時間,終于成功找到了一個解決這個問題的方法。今天免費送給大家。
★首先,打開百度搜索iconfont,排名第一的網站,就是我們今天的重點。這是阿里巴巴矢量圖標庫。
★下一步單擊圖標庫的左上角,有官方圖標庫,以及其他上傳圖標。選擇你的需要,喜歡的。
★點擊圖標,添加到庫存之中。提醒一點,盡量在選擇圖標時候,同類型先選擇,這樣庫存下來的文件它是在一起的,方便我們后期使用。【加入的圖標會顯示在右上角的庫中,提示數量。】
★下一步點擊右上角 的庫,會看到你選中的圖標。然后點擊下面的添加至項目。下載素材會下載單個的圖標,我們需要的是庫,大量調用。因此不選擇此項。當然你要是使用的少量,單個下載也可以。
★接下來會進入到項目文件夾中,你添加的圖標會在此處顯示,不去管它,我們點擊下載到本地。(會得到一個壓縮包,不用說,直接解壓!得到以下的文件。)
★打開demo就可以在瀏覽器中預覽你選中的圖標,這里的demo實際上是沒有用的,只是在我們制作網頁中起一個參考的作用。因而不要刪除它。其它的文件也不要刪除,原原本本的放在那里。
★接下來就是要圖庫引用到網頁中,這里提供了三種引用方式。可以根據需要來引用。
1,font-class引用具有如下特點:
☆兼容性良好,支持ie8+,及所有現代瀏覽器。
☆相比于unicode語意明確,書寫更直觀。可以很容易分辨這個icon是什么。
☆因為使用class來定義圖標,所以當要替換圖標時,只需要修改class里面的unicode引用。
☆不過因為本質上還是使用的字體,所以多色圖標還是不支持的。
2,symbol引用這是一種全新的使用方式,應該說這才是未來的主流,也是平臺目前推薦的用法。 這種用法其實是做了一個svg的集合,與另外兩種相比具有如下特點:
☆支持多色圖標了,不再受單色限制。
☆通過一些技巧,支持像字體那樣,通過font-size,color來調整樣式。
☆兼容性較差,支持 ie9+,及現代瀏覽器。
☆瀏覽器渲染svg的性能一般,還不如png。
3,unicode引用:unicode是字體在網頁端最原始的應用方式,特點是:
兼容性最好,支持ie6+,及所有現代瀏覽器。
支持按字體的方式去動態調整圖標大小,顏色等等。
但是因為是字體,所以不支持多色。只能使用平臺里單色的圖標,就算項目里有多色圖標也會自動去色。
★兼容性上來看,第三種絕對是上上之選,但你要看清楚,他是不支持多色的。即便你選了顏色它也會自動去除,這對我們來說,是有缺陷的。同理第一種方法明顯也不行。那就只剩下第二種方法了。
★第一步:引入項目生成的symbol代碼:把下面的代碼放在head之間。
★第二步:加入通用css代碼(引入一次就行)
★第三步:挑選相應圖標并獲取類名,應用于頁面: 這里引用的就是前面demo下面圖標對應的名稱,主要要加上‘#’號!
★每次調用圖標只需要加上第三步的代碼就可以了。其它不需要動它。最后親自測試可用。
★但是在實際情況iconfont”(font-family)你需要修改項目下的字體。可以通過編輯項目視圖查看,默認是“iconfont”。
★事實上,在引用上,個人覺得第三個參考的方式更方便,只需要定義我的標簽。
★它更換的是這個:
★是不是比上面的方便許多。實際上這個我也測試過,使用:hover選擇器,還是可以改變顏色。所有,個人使用的是這個,主要是代碼精煉。看著起來更好
網頁制作中icon的任意用的文章
文章題目:網頁制作中icon的任意用
轉載注明:http://m.newbst.com/news36/168236.html
成都網站建設公司_創新互聯,為您提供外貿網站建設、定制開發、搜索引擎優化、軟件開發、全網營銷推廣、網站內鏈
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容