中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2022-06-17    分類: 網(wǎng)站建設(shè)

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

什么是icon

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

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

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

★尋找了很長(zhǎng)一段時(shí)間,終于成功找到了一個(gè)解決這個(gè)問題的方法。今天免費(fèi)送給大家。

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

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

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

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

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

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

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

1,font-class引用具有如下特點(diǎn):

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

☆相比于unicode語(yǔ)意明確,書寫更直觀??梢院苋菀追直孢@個(gè)icon是什么。

☆因?yàn)槭褂胏lass來定義圖標(biāo),所以當(dāng)要替換圖標(biāo)時(shí),只需要修改class里面的unicode引用。

☆不過因?yàn)楸举|(zhì)上還是使用的字體,所以多色圖標(biāo)還是不支持的。

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

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

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

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

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

3,unicode引用:unicode是字體在網(wǎng)頁(yè)端最原始的應(yīng)用方式,特點(diǎn)是:

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

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

但是因?yàn)槭亲煮w,所以不支持多色。只能使用平臺(tái)里單色的圖標(biāo),就算項(xiàng)目里有多色圖標(biāo)也會(huì)自動(dòng)去色。

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

★第一步:引入項(xiàng)目生成的symbol代碼:把下面的代碼放在head之間。

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

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

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

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

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

★它更換的是這個(gè):

★是不是比上面的方便許多。實(shí)際上這個(gè)我也測(cè)試過,使用:hover選擇器,還是可以改變顏色。所有,個(gè)人使用的是這個(gè),主要是代碼精煉??粗饋砀?/p>

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

文章題目:網(wǎng)頁(yè)制作中icon的任意用
轉(zhuǎn)載注明:http://m.rwnh.cn/news36/168236.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)、搜索引擎優(yōu)化軟件開發(fā)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站內(nèi)鏈

廣告

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

微信小程序開發(fā)
深泽县| 磐安县| 巴马| 兴仁县| 宁蒗| 巴东县| 白城市| 中牟县| 应用必备| 阳春市| 衡南县| 金门县| 平定县| 玉山县| 扎囊县| 新丰县| 湘潭县| 文水县| 阿拉善右旗| 晋宁县| 卢湾区| 平顺县| 通城县| 深圳市| 鱼台县| 永丰县| 名山县| 宜兴市| 东兰县| 汉寿县| 乐山市| 江门市| 淮滨县| 吉安县| 金华市| 江永县| 蛟河市| 桑植县| 长顺县| 临泉县| 万宁市|