网站建设知识-响应式网站设计前端框架Bootstrap中图标字体库在PS的使用方法与html代码里面的使用_网站建设资讯_成都网站建设,成都网站制作,成都做网站,极客网络-网站制作,企业公司网站优化推广

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

NEWS CENTER

网站建设资讯

极客网站建设-给你专业的网站建设知识,事实网站设计资讯,我们将收集众多网站建设客户问答。

网站建设知识-响应式网站设计前端框架Bootstrap中图标字体库在PS的使用方法与html代码里面的使用

时间:2017-03-18 来源:极客联盟阅读:766次类别:网站建设


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


在用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代码里面的使用就介绍完毕,希望对大家有用。

联络方式:

四川 · 成都 · 金牛区营门立交桥旁奥林春天
 
咨询热线:028-87761615  18980772425

技术处理:18980818615

微信公众号:cdjklm

  • 关于我们
  • 建站套餐
  • 经典案例
  • BBS

  • 成都极客联盟科技有限公司 版权所有 @Copyright 2014-2016 蜀ICP备11018552 信息网络传播视听节目许可证:2305101  业务范围:成都网站制作 成都网站建设 成都网络公司 成都建站 成都网站优化 成都做网站