在前端开发中，许多新手常会遇见一个问题，参考的网页上有类似下图的图标，但在资源里却找不到对应的文件，这是因为这些网页使用了图标库。这里介绍一种常见的图标库——FontAwesome的使用。

1.登录Font Awesome官网，下载Font Awesome安装包，最好下载最新版本的，因为最新版本中的更新的子图图标相对于老版本数量比较全面

附：Font Awesome官网

http://fontawesome.dashgame.com/

2.下载好压缩包后，点击文件夹，找到CSS文件夹里面的font-awesome.css或者font-awesome.min.css（表示压缩过的）复制到自己项目里面的CSS文件夹中，并把安装包文件夹中的fonts文件夹整个文件夹复制到自己项目中。

3.打开HTML页面，在head头部中引入font-awesome.css。

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

当然了，如果没有下载安装包的，可以引入在线css。

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

4.图标的引用：font-awesome图标可以任何一个地方引用，只要在该元素的类中加入前缀fa，在加入对应的图标名称。不知道图标的名称，可以在官网中找到对应的图标，即可以找到对应的图标名称。

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

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

5.可以直接对图标的属性进行更改，如图标的颜色、大小，并且可以组合不同的图标形成所需的图标等。

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

6.执行以上步骤，若是没有图标显示，可以打开font-awesome.css，检查字体库，即引入fonts文件的路径是否正确。

7.注意事项：引用图标时，一定要在class类中引入fa，然后在添加图标的名称

FontAwesome 图标字体库的使用的更多相关文章

  1. fontawesome图标字体库组件在服务器上显示不出来图标的解决

    这个组件在我所开发的网站中被大量使用,为网站增色不少.在本地测试的时候所有图标都能显示出来,可一到服务器上就显示不出来了.网上查列出了可能的原因.其一,IIS没有注册字体类型.经过检查,不存在这个问题 ...

  2. Android 使用图标字体库

    首先,在assets资源文件下放入图标字体库. 我这儿采用的是fontawesome-webfont.ttf 然后, 在安卓中加载这个资源文件 Typeface fontFace = Typeface ...

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

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

  4. 在WPF中使用FontAwesome图标字体

    原文:在WPF中使用FontAwesome图标字体 版权声明:原创内容转载必须注明出处,否则追究相关责任. https://blog.csdn.net/qq_36663276/article/deta ...

  5. font awesome (图标字体库)

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

  6. 【css】最近使用的两种图标字体库

    ## 0. 前言 比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时,使用雪碧图(多个 ...

  7. 学习WPF——使用Font-Awesome图标字体

    图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标 ----- ...

  8. wpf 使用Font-Awesome图标字体

    wpf 使用Font-Awesome图标字体 1.http://fontawesome.io/ 中下载Font-Awesome字体 然后把字体文件fontawesome-webfont.ttf 拷贝到 ...

  9. CSS 让 fontawesome 图标字体变细

    一句 CSS 让 fontawesome 图标字体变细 自从 iOS 某个版本发布之后,前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细.而老物 fontawesome 粗壮的线条风格 ...

随机推荐

  1. Maven学习（八）-- 使用Nexus搭建Maven私服

    摘自:http://www.cnblogs.com/xdp-gacl/p/4068967.html 一.搭建nexus私服的目的 为什么要搭建nexus私服,原因很简单,有些公司都不提供外网给项目组人 ...

  2. 用Promise实现：带延时功能的链式调用

    // 1) 调用方式 new People('whr').sleep(3).eat('apple').sleep(5).eat('durian'); // 2) 打印结果 'hello, whr' - ...

  3. Tomcat 调优方案

    Tomcat的默认配置,性能并不是最优的,我们可以通过优化tomcat以此来提高网站的并发能力.提高Tomcat的性能可以分为两个方向. 服务器资源 服务器所能提供CPU.内存.硬盘的性能对处理能力有 ...

  4. MySql配置优化总结

    当我们被人雇来监测MySQL性能时,人们希望我们能够检视一下MySQL配置然后给出一些提高建议.许多人在事后都非常惊讶,因为我们建议他们仅仅改动几个设置,即使是这里有好几百个配置项.这篇文章的目的在于 ...

  5. IntelliJ IDEA中 todo的使用

    在代码的注释部分加入TODO 大小写忽略,如下图所示 查看项目中有哪些待办项,所下图所示

  6. 图形验证码知识点整理 Object.prototype.toString.call()等

    使用typeof bar === "object"检测”bar”是否为对象有什么缺点?如何避免?这是一个十分常见的问题,用 typeof 是否能准确判断一个对象变量,答案是否定的, ...

  7. 吐槽一下--最近多次在腾讯以及万科的面试经历---Web前端与PHP后端开发

    前端时间,由于职业发展等,想要换一份工作,于是投递了一些国内还算知名的公司,列如: 腾讯.万科之类的: (1)首先说一下这两家公司的反馈情况: 腾讯:投递到反馈,(初次人事打电话沟通)大约1周,三次不 ...

  8. fixed元素随滚动条无抖动滚动

    页面上用fixed定位一个元素,随滚动条滚动位置不变,最开始我只用了css给元素身上写上fixed属性,发现滚动时元素会发生抖动,随后我就在网上找到解决办法,封装了个方法,如下: Css部分 此部分是 ...

  9. Java Script 读书笔记 (四) 面向对象编程

    1. 对象,属性 前面看到对象里删除属性一直疑惑,什么是对象,为什么属性可以删除, 我印象里的属性还是停留在property, 总想不明白为什么属性竟然能够删除.直到看到标准库才明白,原来对象就是py ...

  10. RabbitMQ Network Partitions的预警和处理策略

    网络分区的意义 RabbitMQ的模型类似交换机模型,且采用erlang这种电信网络方面的专用语言实现.RabbitMQ集群是不能跨LAN部署(如果要WAN部署需要采用专门的插件)的,也就是基于网络情 ...