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

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

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

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

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

Font Awesome图标库的更多相关文章

  1. 关于vue项目font字体图标库导入未显示的问题

    运行项目时,弹出以下信息:

  2. Font Awesome(一套很棒的图标库)

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

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

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

  4. 字体图标库 IcoMoon IconFont Font Awesome的使用

    在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...

  5. font awesome (图标字体库)

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

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

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

  7. Css3图标库

    最近在研究icon font图标字库,觉得很有意思,于是找了一些比较好的在线字库.大都是开源的,而且各有特色,推荐给大家! 阿里icon font字库 http://www.iconfont.cn/ ...

  8. icon font字体图标字库汇总

    最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...

  9. Iconfont 矢量图标库的应用

    前言: 在项目开发中,不免在标签栏,工具栏等应用各种各样的小图标. 然后老旧的做法就是要UI设计出各种图标并生成图片给到我们,但是这样就存在了一个问题,每次请求页面的时候就需要发送请求请求图片,这样不 ...

随机推荐

  1. OpenLDAP双主

    1:主A服务器           然后重新生成配置文件数据       主B服务器             注意:两个主服务器的rid必须得一样   在做主从的时候,必须得安装必要的软件包,comp ...

  2. 运行开源项目,报错Error:(48, 37) 错误: -source 1.6 中不支持 diamond 运算符,请使用-source 7或者更高版本已启用diamond运算符

    错误定位 当时并没有弄明白为什么会出错,一脸懵逼相 解决办法: 将source compatibility和target compatibility都改为1.7,重新build就ok了. 错误原因: ...

  3. [整理]S-Record数据格式解析

    S-Reord是一种由摩托罗拉公司创建的文件格式(不得不说,摩托罗拉厉害啊,SPI和S-Record都是他们创造的).S-Record的基本字符为ASCII字符,用以表示相应的十六进制数据.该数据格式 ...

  4. centos 7 下nginx启动脚本

    centos 7下用了版本6下的脚本,总是报错,于是拷贝了nginx一键安装包里面的一个版本,结果可以,贴出来 #! /bin/sh # chkconfig: # Description: Start ...

  5. 关于 cellForRor中给cell setSelected的时机问题?

    我在  cell  里边 - (void)setSelected:(BOOL)selected animated:(BOOL)animated { [super setSelected:selecte ...

  6. was部分更新

    在WAS中,应用的配置是从config/cells....目录下读取:而资源从/installedApps目录下读取 故当配置文件(例web.xml)发生改变时,只更新应用程序资源文件/install ...

  7. h5弹框去掉ip地址

    <script> window.alert = function(name){ var iframe = document.createElement("IFRAME" ...

  8. 自定义View的学习(一) 自绘制控件

    一.自绘控件 就是自己绘制的控件,通过onDraw()方法将控件绘制出来  自定义一个可点击的View  这个View可以记住用户点击的次数 public class CounterView exte ...

  9. C#时间操作

    C#时间戳与日期互转 /// <summary> /// 时间戳转为C#格式时间 /// </summary> /// <param name="timeSta ...

  10. linux服务器apache 一个IP,一个端口,建立多个网站的方法。

    找到apache-tomcat-6.0.14\conf\server.xml ,再services 后面添加此段代码: Xml代码 <!-- 此处  新增的项目配置-->  <Ser ...