添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 设计分享 >

移动端网页设计中是如何把图标变成字体

时间:2014-07-10      来源:未知     

        移动端网页设计已经成为网站建设中的潮流,但是移动端的网页设计要求相对高些,比如不能大量的使用图片,那么,就要求网页设计师不进要会画图标,更重要的是让图标变成字体,从而减少移动端的浏览网页的速度。那么,如何把图标变成字体?

  这两天给公司做案例,由于自己又对设计不熟悉,寻找图标的苦差可不是很好做。同事分享了一个用字体代替图片做网站图标的资源,在此非常感谢!

  Font Awesome,原只为Bootstrap而设计的字体图标,不过,现在你可以单独用它来为你的网站工作。丢掉图片图标吧,跟我一起来用Font Awesome。

  Font Awesome 特性:

  1、一个字体文件, 249 个图标。

  2、用CSS控制样式。

  3、无限缩放。

  4、个人、商业均可自由使用。

  5、支持IE7+。

  6、在Retina屏幕上也能完美呈现。

  7、设计师的助手。

  8、兼容屏幕阅读器。

  Font Awesome的使用:

  1、先下载Font Awesome字体样式文件和字体。CSS样式文件下载清点这里,字体下载请点这里

  2、将下载的字体和CSS样式文件拷贝到你的项目目录中去。

  3、随便选择一个CSS样式文件,你可以选择font-awesome.less或者font-awesome.min.css作为你的图标样式文件。

  4、打开你所选择的样式文件,编辑样式文件中的字体路径,当然这个路径是针对你css样式文件位置来确定的。

  5、在你的项目中引用样式文件即可。

        6、在你需要使用这些图标的地方加上一个html标签,给该标签一个class属性

  例如:

  如需兼容IE浏览器,那请下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。

  关于移动端的网页设计,希望设计很好的掌握的上面的方法,那么,你还用去利用搜索引擎来搜索你想要的图标吗?你还用煞费苦心的去画上百个精细的图标吗?网页设计中图标变成字体,不仅让移动端的浏览速度加快,更是解决了网页设计师的画图标的繁琐的过程。

标签 网页设计
相关文章

最新更新

网页特效