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

        亚洲中文无码人A∨在线导航

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

        NEWS CENTER

        网站建设资讯

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

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

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


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


        在用photoshop 图片处理软件设计制作响应式页面效果图时,我们经?;崾褂靡恍┟拦鄞笃腎CON图标,而在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代码里面的使用就介绍完毕,希望对大家有用。

        联络方式:

        四川 · 成都 · 金牛区金府路88号万通金融中心
         
        咨询热线:028-87761615  18980772425

        技术处理:18980818615

        微信公众号:cdjklm


        公司邮箱:532292474@qq.com

        ?