很早之前，就看到大家在使用代码做出很漂亮的图标，但是觉得需求不是很大，所以就没有看，但是技多不压身，这次有时间来学习下。
FontAwesome官方网站

1，下载文件包

里面有两个文件夹，css 和 fonts
css 下面是主要的css 文件
fonts 下面是一些字体包，文件不小哦
经过我的测试，这两个文件都是必须存在的

2，如何使用

学习最好的例子，就是去官网看说明，这里就告诉了我们如何使用 (开始入门)[http://www.thinkcmf.com/font/get_started]

引入 font-awesome.min.css 文件
复制图标代码

可以通过css 来控制图标的大小、颜色，如果发现图标偏上或者偏下了，可以通过line-height 来改变它的位置

个人的见解

整个文件包还是很大的，我们通常使用的话，图标应该不是很大，如果不是后台大量使用的情况下，我觉得是没有必要使用的，今天先了解这么多，下次详细使用的话，再来细细了解

参考文章：

官方网站

请用fontAwesome代替网页icon小图标

FontAwesome 奥森图标的学习的更多相关文章

  1. 奥森图标和CSS特殊字体使用方法

    作为第一篇博文,写这个 我快要被气炸,好吧,废话不说了 昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome下载后这些文件,现在的版本是4.2,Font Awesome ...

  2. jQuery插件fontIconPicker配合FontAwesome字体图标库的使用

    同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...

  3. Adobe Illustrator里使用fontawesome矢量图标

     简单教程:1.安装FontAwesome.otf字体2.打开http://fontawesome.io/cheatsheet/3.选中图标图片,ctrl+c4.粘贴到AI中5.选中粘贴的内容,修改字 ...

  4. 如何在Axure中使用FontAwesome字体图标

    Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. FontAwesome应用在web网页开发中非常方便, ...

  5. element-ui中使用font-awesome字体图标

    element-ui提供的字体图标是很少的,所以我们需要集成其它图标来使用,nodejs的集成官方有说明,这里说明一下非nodejs开发集成图标 首先下载fontawesome,需要更改里面图标前缀, ...

  6. 为什么我引用bootstrap的font-awesome的图标不出来，就单单是一个HTML里面引用的？

    原文地址:https://www.zhihu.com/question/37015526?sort=created 24 个回答 知乎用户     我来猜猜: 1.检查字体路径是否加载对了2.font ...

  7. 开发笔记 - 解决font-awesome等图标在浏览器中的兼容问题

    今天在写前端页面的时候,觉得font-awesome简单实用就上手试了一下,因为font-awesome图标库甚为强大,我就在其css上多做了一些尝试,这一尝试发现了一个致命的问题,当我对i标签进行统 ...

  8. 如何在微信小程序中国引入fontawesome字体图标

    fontawesome官网地址:http://fontawesome.dashgame.com/ 一. 二. 下载之后的字体图标 找到 文件中的如下图.ttf文件 三. 在https://transf ...

  9. web服务器无法显示font-awesome字体图标

    今天遇到了在本地运行网页 一切调用的额font的小图标都OK的,但是把网页发布到tomcat服务器上面就不行了 之后百度了下,找到了解决方法,遂记录下,方法如下: 在web.xml 文件中加上: &l ...

随机推荐

  1. android NDK 实用学习（三）- java端类对象的构造及使用

    1,读此文章前我假设你已经读过: android NDK 实用学习-获取java端类及其类变量 android NDK 实用学习-java端对象成员赋值和获取对象成员值 2,java端类对象的构造: ...

  2. input file里的JQ change() 事件的只生效一次

    文件选择框的onchange事件只在第一次改变时生效,以后再选择文件不会触发onchange事件. 解决方法1:用jQuery的live代替直接使用change. 错误代码: $("#Upl ...

  3. prefuse学习（二）显示一张图

    1．  把数据以点连线的方式在画面中显示 2．  数据按照数据的性别属性使用不同的颜色 3．  鼠标左键可以把图在画面中拖动 4．  鼠标右键可以把图放大或者缩小 5．  鼠标单击某个数据上,该数据点 ...

  4. 【noip2011】观光公交

    题解: 做这题的时候为了敢速度- - 直接orz了神小黑的题解 其实我还是有想一个拙计的方法的- - dp:f[i][j] 表示到i点使用j个加速器 在i前上车的人的时间和 轻松愉悦转移之 - - 但 ...

  5. A Tour of Go Switch

    You probably knew what switch was going to look like. A case body breaks automatically, unless it en ...

  6. 使用Java原生代理实现数据注入

    本文由博主原创,转载请注明出处 完整源码下载地址 https://github.com/MatrixSeven/JavaAOP 上一篇,咱们说了使用Java原生代理实现AOP的简单例子,然么就不得不说 ...

  7. http协议分析工具

    资源推荐 1.Wireshark抓包软件 Wireshark(前称Ethereal)是一个网络封包分析软件.网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料.Wireshar ...

  8. mysql视图和存储过程定义者修改脚本（懒人专用）

    前言: 在实际工作中mysql数据库的迁移.备份恢复.数据库重命名等一系列涉及到视图和存储过程定义者问题都会需要修改,每次都要从基础表获取数据,然后手工整理做脚本,十分麻烦,所以简单写了个过程,以后可 ...

  9. 取消jQuery validate验证

    有时候当我们在编辑页面点保存后加上了validate错误验证后又想用表单提交的方式返回界面没有清除验证就返回不了 加上这句话就清除验证了      注意:remove()是删除了相关标签  我这需求是 ...

  10. IOS设置button 图片 文字 上下、左右

    [btn setImage:imgNor forState:UIControlStateNormal]; [btn setImage:imgSel forState:UIControlStateSel ...