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

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

在用photoshop 圖片處理軟件設(shè)計(jì)制作響應(yīng)式頁面效果圖時(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也可以支持更不用說其他瀏覽器了。

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

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

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

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

2.安裝

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

打開上面文件夾李的FOOTs文件夾

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

現(xiàn)在你在打開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ù)來做設(shè)計(jì)了，

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

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

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

將以下代碼粘貼到網(wǎng)頁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í)際上使用  才能更加語義化。

 fa-camera-retro

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

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