成都极客联盟网站建设公司欢迎你的光临！-我们成都专门负责的网站制作、网站维护与网站优化推广等相关业务！-

响应式网站在前端人员制作之前我们需要像客户设计对应的效果图，效果图客户确认后前端人员才会开始开发前端代码，

在用photoshop 图片处理软件设计制作响应式页面效果图时，我们经常会使用一些美观大气的ICON图标，而在bootstrap前端框架的组件中，有图标字体库可供前端设计师使用，

如：

在响应式网站制作中图标字体的好处毋庸置疑；

可以像文字一样自由的变化大小与颜色，还可以添加box-shadow阴影效果同样可以添加text-stroke和background-clip:text等属性，只要浏览器支持而且IE6也可以支持更不用说其他浏览器了。

一、图标字体库在PS的使用方法

那么这些在代码像文字一样的图标怎么样在photoshop软件里面设计出来呢？

这里推荐使用Font Awesome图标字体库

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

2.安装

下载字体库后解压

打开上面文件夹李的FOOTs文件夹

安装里面的字体到系统盘的windows文件夹里面的fonts文件里面

现在你在打开ps里面就有对应的字体了

现在在设计师，你需要上面图标可以在

http://fontawesome.io/cheatsheet/

直接复制对应的图标，（是复制图标）

在ps里面文字图片粘贴进去就可以

这样在ps里面就可以用文字的形式使用图标字体库来做设计了，

二、图标字体库html代码里面的使用

这里我们就不介绍bootstrap的框架的基础了

只需要在你制作的图标字体css样式文件加入到你的html文件充就可以

将以下代码粘贴到网页HTML代码的  部分.

上面是网络的cdm加速，你可以直接用下载到本地的CSS样式文件

您可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用  ，因为它更简洁。 但实际上使用  才能更加语义化。

 fa-camera-retro

· 如果您修改了图标容器的字体大小，图标大小会随之改变。同样的变化也会发生在颜色、阴影等其它任何CSS支持的效果上。

到此极客联盟网站建设对图标字体库在PS的使用方法与html代码里面的使用就介绍完毕，希望对大家有用。