在做网页开发中经常会用到图标,原来经常会到一些icon网站上找导入到项目中,现在Font-Awesome中的有很多的图标,并且还在不断更新

现在Font-Awesome最新版本是4.7,下载出来的Font-Awesome有下面这些文件,只保留css和fonts文件夹中的内容就可以了

新建一个html页面,在html用引用css样式

<link href="css/font-awesome.min.css" rel="stylesheet">

在官网中选择好要引用的图标点击该图标进去

<ul class="fa">
<li class="fa fa-list-ul">百度</li><br/>
<li class="fa fa-list-ul">谷歌</li>
</ul>

页面显示注意引用样式的时候要在样式(fa-list-ul)前面加上fa

如果想改变图标和文字颜色呢?

<ul class="fa">
<li class="fa fa-list-ul">百度</li><br/>
<span style="color:red;"><li class="fa fa-list-ul">谷歌</li><span>
</ul>

页面显示

只需要在li标签前面加上<span>标签设置color颜色就可以了。

这里只是做一个简单的介绍,还想了解更多可以看看官网的例子

还有一个Font-Awesome中文网站,不过版本没有英文版本的新,可以参考下

IE9之前还只支持eot格式,需要将ttf格式转换成eot格式

在线转换工具 Webfont Generator

还可以参考一些文章 http://www.jb51.net/css/70033.html

CSS3 中 图标编码 icon——Font-Awesome的更多相关文章

  1. icon font在sketch中的下载与安装

    icon font的下载安装: 1.首先打开sketch--插件--管理插件--获取插件--搜索 icon font--点击icon font--clone or download--下载的是一个sk ...

  2. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  3. 字体图标 icon font

    Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 * ...

  4. 把UI图里的小图标制作成icon font

    一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...

  5. (转)在iOS中使用icon font

    http://ued.taobao.org/blog/?p=8579 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与Ret ...

  6. 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具)

    继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库 ...

  7. 在iOS中使用icon font

    博文转载至 http://www.cocoachina.com/industry/20131111/7327.html 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平 ...

  8. 字体图标Icon Font

    字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发 ...

  9. 在iOS开发中使用icon font的方法

    http://iconfont.cn/help/iconuse.html 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与R ...

随机推荐

  1. Loading Large Bitmaps Efficiently

    有效地加载大位图文件-Loading Large Bitmaps Efficiently 图像有各种不同的形状和大小.在许多情况下,他们往往比一个典型应用程序的用户界面(UI)所需要的资源更大.例如, ...

  2. 【Android学习】Merge 优化布局

      <merge />标签用于减少View树的层次来优化Android的布局   新建项目,不需要改动   运行后使用“DDMS -> Dump View Hierarchy for ...

  3. Android之悬浮窗口实现(WindowManager)

    工作中遇到一些项目需要把窗体显示在最上层,像来电弹窗显示电话号码等信息.拦截短信信息显示给用户或者游戏中实现声音的调节,我们想这些数据放在最上层,activity就满足不了我们的需求了,有些开发者使用 ...

  4. [译]Javascript中的闭包(closures)

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  5. [转]Linux安装前配置操作记录

    转至:http://m.blog.csdn.net/weixin_35884835/article/details/52385077 1.修改用户的SHELL的限制,修改/etc/security/l ...

  6. 让 Winform 窗口悬浮的简单方式

    很多次设置这个 TopMost 属性会莫名的不起作用,有时又可以.一直在想是为什么会这样? 后来多次尝试,发现这个属性必须在窗体某些其他属性后设置,比如在 Height.Width 这样的属性后. 看 ...

  7. EIP权限工作流升级说明-2019/3/5

    首页增加待办事项直接处理按钮 2,新增处理历史记录

  8. JavaScript混淆压缩

    比较好用的压缩软件,支持合并 JsCompressor-v3.0 比较好用的混淆站点:http://dean.edwards.name/packer/

  9. 一种Web服务的go语言实现

    0.引言 go语言已成为当今web后台开发的首选语言,关键在于其简洁性和高效并发特性.go中提供了丰富通用的http开发接口,但一般需要对其进一步封装才能更好的用于实际项目中.因此,本文基于开源库(g ...

  10. eclipse jdk安装

    在Ubuntu16.04.4安装jdk 转载自:http://www.cnblogs.com/zyrblog/p/8510132.html 一.在Ubuntu16.04.4上安装jdk  1.下载jd ...