Font Awesome 完美的图标字体

好久没来,虽说鄙人的人气不咋地,但还是很想念自己这一亩二分田地。

近期用在平台开发中,看着设计师摆开阵势,准备大画图标,想着自己将会很KUBI拼凑css-sprite图片,接着写一大堆 class^="icon-XXXX",此处空余千行泪。。。

其实,做前端的都有这样的情绪,“我不想切图标啊!!!”,本人甚是。就在茫然不知所措是,偶然在

http://www.bootcss.com/p/font-awesome/ 发现了新大陆!!!真的是相见恨晚。

在此给出这个项目的简介:

  • 一个字体文件, 249 个图标——一个字体文件包含了所有图标。Font Awesome 助你完整表达web页面上每个动作的含义。
  • 用CSS能非常容易的改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性。
  • 矢量图意味着每个图标都能在所有大小的屏幕上完美呈现。
  • Font Awesome是完全免费的,无论个人还是商业使用。
  • Font Awesome支持IE7及以上浏览器。
  • Font Awesome 中包含的都是矢量图标,在高分辨率的显示器上也能完美呈现。
  • Font Awesome是完全从头设计的整套图标,完全和Bootstrap 2.2.2版本兼容。
  • 安装 FontAwesome.otf 字体文件,然后在这个页面直接拷贝粘贴图标字符的代码就可以用于你的设计中了。
  • Font Awesome 不会阻止屏幕阅读器,这和其他图标字体的行为方式完全不同。

到这里,我只能说,这个太给力了!

如果你是一枚前端开发,使用这个工具,需要你做的仅仅是熟悉这个字体库的命名规则,避免与其命名冲突。剩下的,开始享受你的工作吧!

项目地址:http://www.bootcss.com/p/font-awesome/

Font Awesome 完美的图标字体,布布扣,bubuko.com

时间: 2024-07-30 09:07:08

Font Awesome 完美的图标字体的相关文章

图标字体的使用(fontello.com)字体推荐及使用技巧

网页设计中为了页面漂亮好看,图标是少不了,网页中使用的图标通常都是使用图片,使用图片图标的有很多弊端,如果你经常制作网页应该有一肚子埋怨. 使用图片图标的弊端 放大图标必须重新作图, 改变颜色必须开启作图软件重新调色,并且不同的颜色就要对应一个图片图标 更多弊端不一一列举 如果这些图标能像字体一样,改变大小,更改颜色,那岂不是太爽了,下面的文字就是介绍一种在网页中使用图标字体的方法. 下面懒人建站来介绍图标字体的使用(fontello.com)字体的使用以及技巧 首先:使用火狐.谷歌或者360极

Font Awesome奥森图标一套绝佳的图标字体库和CSS框架

迄今最完好的翻译版本-一套绝佳的图标字体库和CSS框架(奥森图标) Font Awesome 逐浪CMS官方版正式开放啦! 免费获取和使用就在:http://code.zoomla.cn/boot/font.html(非广告官方翻译版本,希望对广大开发者有用). 逐浪CMS已经完全支持Font Awesome奥森图标! Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. 一个字库,479个图标 仅一个F

最新的超棒免费图标字体(icon font)收集

今天我们收集了18套非常有特色的免费图标字体给大家,如果能够将它们应用到你的用户界面设计上,绝对是完美之极! 到底什么才是图标字体? 图标字体是字体文件,用符号和字形的轮廓(像箭头.文件夹.放大镜等) 代替标准的文字数字式字符.图标字体就像Dingbat fonts,是专门为用户界面设计,就像其它网站字体一样,使用[email protected]在web浏览器里展示.处理方式类似网站字体: 拥有跨浏览器支持(甚至是IE6,例如,使用@font-face渲染网页字体) 如果使用者调整他们的浏览器

Font Awesome图标字体应用及相关

作为web开发者,难免要经常要用到些小图标,给自己web增添几分活力和多样性.像这些: 而Font Awesome刚好为我们提供了这些.到目前为止,Font Awesome提供了有500多个可缩放的的矢量图标,并且可以使用css所提供的所有特性对这些图标进行更改,包括:大小.颜色.阴影或者其他任何支持的效果.这些图标基本涵盖了web开发者的基本需求,并且Font Awesome还在不断维护更新,提供新的图标,以供开发者使用. 在此,主要介绍一下Font Awesome图标字体的基本使用. 到Fo

Font Awesome 是一套绝佳的图标字体库和CSS框架

Font Awesome 是一套绝佳的图标字体库和CSS框架.http:/ /ww w.i is7.co m/b/slj/Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用CSS的样式.要使用Font Awesome图标,请在HTML页面的 部分中添加以下行:国内 CDN:<link rel="stylesheet" href="https:/ /cdn.bootcss.com/font-awesome/4.7.0/css/

图标字体化浅谈[转]

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方案.SVG矢量图等,都因为种种原因放弃掉了(如多套

CSS3 icon font完全指南(CSS3 font 会取代icon图标)

为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求.那么我们就要将这些小图标输出为多种尺寸.颜色和文件格式,比如png8 alpha透明或者png8 index透明等. 比如,twitter用到的各种小icon: 这种情况下,使用字体来实现图标就有很多优势: 字体文件小,一般20-50kb: 容易编辑和维护,尺寸和颜色可以用css来控制: 透明完全兼容IE6: 如何将icon变成字体? 最关键的是要将

图标字体 VS 雪碧图——图标字体应用实践

本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点. 雪碧图 雪碧图实例:淘宝PC端 将多张小图放至一张大图 使用的时候,通过background-position调整显示的位置,如下图所示: 雪碧图的使用方法 使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数.因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chro

图标字体化浅谈

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方案.SVG矢量图等,都因为种种原因放弃掉了(如多套