Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形,被保存在 .svg 的文件格式中。这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小。

你可以将 Font Awesome 图标库增添至任何一个应用中,方法很简单,只需要在你的 HTML 头部增加下列代码即可:

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

当然也可以下载到本地使用,地址:http://fontawesome.io/   http://fontawesome.dashgame.com/ (中文网)

(link的路径根据自己下载保存的位置来定);

使用方式:

i 元素起初一般是让其它元素有斜体(italic)的功能,不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中,把它变成一个图标,比如:

<i class="fa fa-info-circle"></i>

使用案例:

官网给出了详细的使用案例哦(可以自己动手试试,真理来源于实践):http://fontawesome.io/examples/

Font Awesome(一套很棒的图标库)的更多相关文章

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

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

  2. Font Awesome图标库

    Font Awesome 是一个非常方便的图标库.这些图标都是矢量图形,被保存在 .svg 的文件格式中.这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小 ...

  3. vue中引入.svg图标,使用iconfont图标库

    阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...

  4. 在nuxt中引入Font Awesome字体图标库

    介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...

  5. EasyDropDown – 很棒的下拉菜单,含精美主题

    EasyDropDown 是一个 jQuery 插件,你可以毫不费力地将简陋的 Select 元素设置为可定制风格的下拉菜单,用于表单或者一般的导航.和著名的下拉插件 Chosen 很像,但是具有自己 ...

  6. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  7. 30 个很棒的 PHP 开源 CMS 内容管理系统

    本文汇集了30个优秀的开源CMS建站系统,采用PHP开发.以下列表不分先后顺序. 1. AdaptCMS AdaptCMS Lite 是一个开源的CMS系统,主要特点是易用,而且可以轻松和其他系统接驳 ...

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

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

  9. 优秀工具推荐:两款很棒的 HTML5 游戏开发工具

    HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...

随机推荐

  1. xml文件头文件生成策略以及导入约束条件

    约束的作用是对配置文件的一种检验 约束条件分为schema约束和DTD约束,schema约束是还有目录结构,DTD约束没有目录结构 这里暂先介绍schema约束的导入 约束的分类: 1.schema ...

  2. python 引入本地module

    我们经常会遇到调用组内其他成员开发的python脚本的情况, 这时,需要借助如下代码: import sys sys.path.append('/./..') #/./.. 是需要引入的module的 ...

  3. 前端与后台服务交互--json处理的流程以及用到的工具代码

    现在的开发趋势基本上是前后端分离,并且前端和后端的交互一般是用json: 前端: 前端一般传输的是对象,那把对象变成json,需要引用的是json2.js这个js文件中的JSON.stringfy() ...

  4. Linux Buffer/Cache 的区别

      以前经常使用free -h命令来查看当前操作系统的内存使用情况,同时也注意过返回信息中有一列是buff/cache,来公司之前,面试官还问过我这两个的区别,当时没有回答出来,现在特意回顾记录下: ...

  5. neo4j CQL 使用

    neo4j CQL 使用 1. create命令 CREATE (emp:Employee) #创建一个emp 员工标签 CREATE (dept:Dept) #部门标签 #Added 1 label ...

  6. FFmpeg4.0笔记:rtsp2rtmp

    Github https://github.com/gongluck/FFmpeg4.0-study.git #include <iostream> using namespace std ...

  7. charles捕获手机端请求数据

    charles是mac os中的一款类似于windows下fiddler的代理软件,个人感觉比fiddler功能强大:通过charles可以实现指定的请求响应.篡改请求内容.延迟请求.捕获手机端请求等 ...

  8. 18_python_类关系

    一.类与类之间的关系          1.依赖关系 class Elephant: def __init__(self, name): self.name = name def open(self, ...

  9. linux服务器ssh免密码登录

    假设有三台服务器的ip分别是10.9.1.101.10.9.1.102.10.9.1.103 修改hosts文件 分别修改三台服务器的hosts的文件(vi /etc/hosts), 在hosts文件 ...

  10. D14——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D14 20180919内容纲要: 1.html认识 2.常用标签 3.京东html 4.小结 5.练习(简易淘宝html) 1.html初识(HyperText ...