?国产最新凸凹视频免费,亚洲狼人香蕉香蕉在线28

成都極客聯(lián)盟網(wǎng)站建設(shè)公司歡迎你的光臨!-我們成都專門負(fù)責(zé)的網(wǎng)站制作、網(wǎng)站維護(hù)與網(wǎng)站優(yōu)化推廣等相關(guān)業(yè)務(wù)!-

NEWS CENTER

網(wǎng)站建設(shè)資訊

極客網(wǎng)站建設(shè)-給你專業(yè)的網(wǎng)站建設(shè)知識(shí),事實(shí)網(wǎng)站設(shè)計(jì)資訊,我們將收集眾多網(wǎng)站建設(shè)客戶問(wèn)答。

網(wǎng)站建設(shè)知識(shí)-響應(yīng)式網(wǎng)站設(shè)計(jì)前端框架Bootstrap中圖標(biāo)字體庫(kù)在PS的使用方法與html代碼里面的使用

時(shí)間:2017-03-18來(lái)源:極客聯(lián)盟閱讀:5352次類別:網(wǎng)站建設(shè)


響應(yīng)式網(wǎng)站在前端人員制作之前我們需要像客戶設(shè)計(jì)對(duì)應(yīng)的效果圖,效果圖客戶確認(rèn)后前端人員才會(huì)開(kāi)始開(kāi)發(fā)前端代碼,


在用photoshop 圖片處理軟件設(shè)計(jì)制作響應(yīng)式頁(yè)面效果圖時(shí),我們經(jīng)常會(huì)使用一些美觀大氣的ICON圖標(biāo),而在bootstrap前端框架的組件中,有圖標(biāo)字體庫(kù)可供前端設(shè)計(jì)師使用,

如:

 

在響應(yīng)式網(wǎng)站制作中圖標(biāo)字體的好處毋庸置疑;

可以像文字一樣自由的變化大小與顏色,還可以添加box-shadow陰影效果同樣可以添加text-stroke和background-clip:text等屬性,只要瀏覽器支持而且IE6也可以支持更不用說(shuō)其他瀏覽器了。

一、圖標(biāo)字體庫(kù)在PS的使用方法

那么這些在代碼像文字一樣的圖標(biāo)怎么樣在photoshop軟件里面設(shè)計(jì)出來(lái)呢?

這里推薦使用Font Awesome圖標(biāo)字體庫(kù)

1下載地址:http://fontawesome.dashgame.com/#basic

 


2.安裝

下載字體庫(kù)后解壓

 

打開(kāi)上面文件夾李的FOOTs文件夾

 

安裝里面的字體到系統(tǒng)盤的windows文件夾里面的fonts文件里面


現(xiàn)在你在打開(kāi)ps里面就有對(duì)應(yīng)的字體了


現(xiàn)在在設(shè)計(jì)師,你需要上面圖標(biāo)可以在


http://fontawesome.io/cheatsheet/


直接復(fù)制對(duì)應(yīng)的圖標(biāo),(是復(fù)制圖標(biāo))


 



在ps里面文字圖片粘貼進(jìn)去就可以

這樣在ps里面就可以用文字的形式使用圖標(biāo)字體庫(kù)來(lái)做設(shè)計(jì)了,


二、圖標(biāo)字體庫(kù)html代碼里面的使用

這里我們就不介紹bootstrap的框架的基礎(chǔ)了

只需要在你制作的圖標(biāo)字體css樣式文件加入到你的html文件充就可以

將以下代碼粘貼到網(wǎng)頁(yè)HTML代碼的  部分.


上面是網(wǎng)絡(luò)的cdm加速,你可以直接用下載到本地的CSS樣式文件

 

您可以將Font Awesome圖標(biāo)使用在幾乎任何地方,只需要使用CSS前綴 fa ,再加上圖標(biāo)名稱。 Font Awesome是為使用內(nèi)聯(lián)元素而設(shè)計(jì)的。我們通常更喜歡使用  ,因?yàn)樗?jiǎn)潔。 但實(shí)際上使用  才能更加語(yǔ)義化。

 fa-camera-retro


· 如果您修改了圖標(biāo)容器的字體大小,圖標(biāo)大小會(huì)隨之改變。同樣的變化也會(huì)發(fā)生在顏色、陰影等其它任何CSS支持的效果上。

到此極客聯(lián)盟網(wǎng)站建設(shè)對(duì)圖標(biāo)字體庫(kù)在PS的使用方法與html代碼里面的使用就介紹完畢,希望對(duì)大家有用。