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

近期用在平台开发中，看着设计师摆开阵势，准备大画图标，想着自己将会很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 完美的图标字体的更多相关文章

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

    网页设计中为了页面漂亮好看,图标是少不了,网页中使用的图标通常都是使用图片,使用图片图标的有很多弊端,如果你经常制作网页应该有一肚子埋怨. 使用图片图标的弊端 放大图标必须重新作图, 改变颜色必须开启 ...

  2. Font Awesome:图标字体，完全CSS控制

    Font Awesome是一种web font,它包含了几乎所有常用的图标,比如Twitter.facebook等等.用户可以自定义这些图标字体,包括大小.颜色.阴影效果以及其它可以通过CSS控制的属 ...

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

    http://fontawesome.dashgame.com/ http://www.runoob.com/font-awesome/fontawesome-tutorial.html Font A ...

  4. font awesome (图标字体库)

    Font Awesome fa是什么? 图标字体库和CSS框架 怎么用? <link rel="stylesheet" href="https://cdn.boot ...

  5. Font Awesome图标字体应用及相关

    作为web开发者,难免要经常要用到些小图标,给自己web增添几分活力和多样性.像这些: 而Font Awesome刚好为我们提供了这些.到目前为止,Font Awesome提供了有500多个可缩放的的 ...

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

    本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...

  7. (转载)app ico图标字体制作

    图标字体化浅谈   在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复 ...

  8. 第一次制作和使用图标字体-IcoMoon

    开题:之前就有所耳闻,最近两天第一次运用到图标字体.刚开始嘛,一脸懵逼的状态.成功运用之后就来记录一下使用过程咯! 1. 打开在线生成工具:https://icomoon.io/app/#/selec ...

  9. iOS中iconfont(图标字体)的基本使用

    前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...

随机推荐

  1. get-pip.py 安装

    http://www.pip-installer.org/en/latest/installing.html$ curl http://pypi.python.org/packages/source/ ...

  2. 浮动产生的高度坍塌解决方法以及使用siblings()方法获取同级元素

    高度坍塌:如果一个没有设置高度div里的元素都是浮动元素,这个时候就可能产生高度坍塌,因为div的高度都是普通元素撑起来的,div里的元素浮动之后,元素就会脱离文档流,所以父级的div高度就可能为零, ...

  3. ORACLE中查询语句的执行顺及where部分条件执行顺序测试

    Oracle中的一些查询语句及其执行顺序 原文地址:https://www.cnblogs.com/likeju/p/5039115.html 查询条件: 1)LIKE:模糊查询,需要借助两个通配符, ...

  4. Sftp搭建与配置参考

    Sftp搭建与配置参考 1. 介绍 sftp是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法.sftp 与 ftp 有着几乎一 ...

  5. Hibernate一级缓存和三种状态

    Hibernate一级缓存又称session缓存,生命周期很短,跟session生命周期相同. 三种状态:1.transient(瞬时态):刚new出来的对象,既不在数据库中,也不在session管理 ...

  6. 【篇一】Python安装与初识

    一.python3.6安装 windows: 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\python27 3.配置环境变量 [右 ...

  7. python学习——单例模式

    在python中,单例模式在面试中非常重要.下面来给大家推荐一个Python中实现单例模式的博客地址. https://www.cnblogs.com/huchong/p/8244279.html

  8. 树莓派安装samba

    (1) sudo apt-get install samba samba-common (2)mkdir /home/lin/share #(文件路径自己添加) (3)sudo chmod 777 / ...

  9. AtCoder Regular Contest 100 E - Or Plus Max

    一道很好的dp题 dp[K]存的是 i满足二进制1属于K二进制1位置 最大的两个Ai 这样dp[K]统计的两个数肯定满足(i | j) <= K 然后不断做 update(dp[i | (1&l ...

  10. 封装axios方法之一

    一.先来说说为什么要封装axios异步请求. 我们前端开发中总是会遇到跨域的问题,我们会配置proxy来解决跨域的问题,无论是vue 还是react. 如何配置我这里就不说了. 然后...然后我们就会 ...