在前端开发中，许多新手常会遇见一个问题，参考的网页上有类似下图的图标，但在资源里却找不到对应的文件，这是因为这些网页使用了图标库。这里介绍一种常见的图标库——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. java 引用数据类型（类）

    我们可以把类的类型为两种: 第一种,Java为我们提供好的类,如Scanner类,Random类等,这些已存在的类中包含了很多的方法与属性,可供我们使用. 第二种,我们自己创建的类,按照类的定义标准, ...

  2. Data_r_and_w(csv,json,xlsx)

    import osimport sysimport argparsetry:    import cStringIO as StringIOexcept:    import StringIOimpo ...

  3. Java开源生鲜电商平台-推荐系统模块的设计与架构(源码可下载）

    Java开源生鲜电商平台-推荐系统模块的设计与架构(源码可下载) 业务需求: 对于一个B2B的生鲜电商平台,对于买家而言,他需要更加快速的购买到自己的产品,跟自己的餐饮店不相关的东西,他是不关心的,而 ...

  4. 注解（Annotation）自定义注解入门

    摘自:http://www.cnblogs.com/peida/archive/2013/04/24/3036689.html 元注解: 元注解的作用就是负责注解其他注解.Java5.0定义了4个标准 ...

  5. python3 爬去QQ音乐

    import requests import re import json import os def get_name(singer): url = 'https://c.y.qq.com/soso ...

  6. 使用crypto-js对数据进行AES加密、解密

    前段时间做项目有用到数据加密,前端加密,后端解密(前端也可以解密),话不多说进入正题: 第一步: npm i crypto-js -S 第二步: 在需要加密或解密的地方引入crypto-js: imp ...

  7. C# 冒泡法

    C#冒泡排序   1:原理 以此比较相邻的两个元素,每次比较完毕最大的一个字跑到本轮的末尾. 目的:按从小到大排序. 方法: 假设存在数组:72, 54, 59, 30, 31, 78, 2, 77, ...

  8. YII框架CGridView分页实现

    C控制器层 $model = new User('search'); $model->unsetAttributes(); $dataProvider = $model->search() ...

  9. BootStrap 专题

    验证码的输入框和验证码图片在一行,用bootstrap原生的怎么写呢? 看了教程,没有完全一样的可以让右侧的按钮“输入验证码”固定大小.左侧的输入框动态大小吗?   <div class=&qu ...

  10. python多线程（一）

    ---恢复内容开始--- 首先先来看个单线程的例子: from time import ctime,sleep def music(): ): print("I was listening ...