Font Awesome 图标如何使用

一、总结

一句话总结：Font Awesome字体图标非常好用，直接引入font-awesome.css，然后就可以直接使用了，使用的时候是用的i标签。

1、字体图标一般用什么元素使用？

Font Awesome 设计为与内联元素一起使用。 <i>和 <span> 元素广泛用于图标。

二、Font Awesome 图标如何使用

Font Awesome 是一套绝佳的图标字体库和CSS框架。

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

要使用Font Awesome图标，请在HTML页面的 部分中添加以下行：

1、国内推荐 CDN：

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">

2、海外推荐 CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

3、直接下载到本地

Download

注意： 不太建议下载来安装，直接在 html 文档头部引用 CDN 文件即可。

注意： 本教程使用的是 4.7.0 版本。

您可以使用前缀 fa 和图标的名称来放置 Font Awesome 图标。

实例

 <!DOCTYPE html>

 <html>

 <head>

 <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">

 </head>

 <body>

 <i class="fa fa-car"></i>

 <i class="fa fa-car" style="font-size:48px;"></i>

 <i class="fa fa-car" style="font-size:60px;color:red;"></i>

 </body>

 </html>

结果:

尝试一下 »

点击 "尝试一下" 按钮查看在线实例

Font Awesome 设计为与内联元素一起使用。 <i>和 <span> 元素广泛用于图标。

另外注意，如果更改图标容器的字体大小或颜色，图标会更改。

参考：

Font Awesome 图标 | 菜鸟教程
http://www.runoob.com/font-awesome/fontawesome-tutorial.html

 

Font Awesome 图标如何使用的更多相关文章

  1. CSS 中Font Awesome 图标（附码表）

    HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 传送门:http://fontawesome.das ...

  2. Font Awesome图标库

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

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

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

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

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

  5. font awesome (图标字体库)

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

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

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

  7. 如何在HTML5 Canvas 里面显示 Font Awesome 图标

        Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用. 提供的CSS 已经可以完美显示这些图标在网页里面.最新的版本4.3 里面,已经提供519 Icon ...

  8. Font Awesome图标字体库（2015年05月25日）

    Font Awesome是一款非常棒的字体图标工具,给个地址,具体的自已慢慢去体会,只能帮你到这儿了...... http://fortawesome.github.io/Font-Awesome/ ...

  9. 在WPF应用程序中使用Font Awesome图标

    Font Awesome 在网站开发中,经常用到.今天介绍如何在WPF应用程序中使用Font Awesome . 如果是自定义的图标字体,使用方法相同. 下载图标字体 在官方网站或github上下载资 ...

随机推荐

  1. Select 选择算法 - 编程珠玑(续) 笔记

    Select 算法 I 编程珠玑(续)介绍的 Quickselect 算法 选择 N 个元素中的第 K 小(大)值,是日常场景中常见的问题,也是经典的算法问题. 选取 N 个元素的数组的中的第 K 小 ...

  2. 记录一下Memcached的用法：

    首先就是先要配置Memcached,这个回头再写. https://zhidao.baidu.com/question/809745125827797732.html https://www.cnbl ...

  3. rem的解决方案

    http://www.qdfuns.com/notes/32967/37b8f127797c6c2b66f2c1dc6d133e45.html rem 作为一个低调的长度单位,由于手机端网页的兴起,在 ...

  4. javascript“类”与继承总结

    http://haorooms.com/post/js_jc_lei2

  5. Oracle 审计初步使用

    新增一个表空间用于存储审计日志 SQL> CREATE tablespace audit_data datafile '/data/oradata/orcl/audit01.dbf' SIZE ...

  6. Ubuntu下通过Firefox Opera Chromium浏览器直接执行java应用程序（打开java jnlp文件）实现在服务器远程虚拟控制台完成远程管理的方法

    远程虚拟控制台依赖于java运行环境(jre),在通过浏览器打开链接前,系统必须安装jre环境,远程管理控制台其实就是一个java程序,打开相应的网站会下载一个jnlp(java网络加载协议)的文件, ...

  7. windows无法连接到打印机 错误提示0x00000214

    win7 64位 同事win7 32位,通过\\IP连接,安装打印机时提示“windows无法连接到打印机 错误提示0x00000214” 开始——设备和打印机——添加打印机——添加本地打印机——创建 ...

  8. web开发快速提高工作效率的一些资源

    前端学习资源实在是又多又广,在这样的一个知识的海洋里,我们像一块海绵一样吸收,想要快速提高效率,平时的总结不可缺少,以下总结了一些,排版自我感觉良好,推送出来,后续持续跟新中...... 开发工具 H ...

  9. IDEA全局更改统一编码为utf-8

    File -> Other Settings->Deaault Settings->Settings->File Encodings -> Defaule encodin ...

  10. Linux下redis安装（单机版）

    redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcached类似,但很大程度补偿了 memcached的不足,它支持存储的value类型相对更多,包括stri ...