在前端开发中，许多新手常会遇见一个问题，参考的网页上有类似下图的图标，但在资源里却找不到对应的文件，这是因为这些网页使用了图标库。这里介绍一种常见的图标库——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. DDD实战进阶第一波(十)：开发一般业务的大健康行业直销系统（实现经销商登录仓储与逻辑）

    上一篇文章主要讲了经销商注册的仓储和领域逻辑的实现,我们先把应用服务协调完成经销商注册这部分暂停一下,后面文章统一讲. 这篇文章主要讲讲经销商登录的仓储和相关逻辑的实现. 在现代应用程序前后端分离的实 ...

  2. Rocketmq 集群

    写在前面 Rocketmq采用apache rockemq 4.2.0release版本. 源码路径(http://mirrors.shu.edu.cn/apache/rocketmq/4.2.0/r ...

  3. Proxy是在什么时候调用InvocationHandler的invoke方法的

    最近看到spring的动态代理,扒到深处看到时 Proxy.newProxyInstance(classLoader, proxiedInterfaces, this);看到这一句,顿时比较懵逼,还是 ...

  4. Lucene入门案例一

    1. 配置开发环境 官方网站:http://lucene.apache.org/ Jdk要求:1.7以上 创建索引库必须的jar包(lucene-core-4.10.3.jar,lucene-anal ...

  5. 由于github仓库中提前建立readme文件，导致git push报错error: failed to push some refs to 'git@github.com:

    $ git push -u origin master To git@github.com:xxx/xxx.git ! [rejected] master -> master (fetch fi ...

  6. Debian9桌面设置

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=665 新安装的Debian9桌面上啥都没有,就像这样: 图 1 虽然很简洁,但是用着不是很方便,下面我们就通过一些设 ...

  7. Load balancer does not have available server for client

    最近在研究spring-cloud,研究zuul组件时发生下列错误: Caused by: com.netflix.client.ClientException: Load balancer does ...

  8. bash: pip: command not found... 解决方法

    下载安装wget "https://pypi.python.org/packages/source/p/pip/pip-1.5.4.tar.gz#md5=834b2904f92d46aaa3 ...

  9. python 产生token及token验证

    1.前言 最近在做微信公众号开发在进行网页授权时,微信需要用户自己在授权url中带上一个类似token的state的参数,以防止跨站攻击.在经过再三思考之后,自己试着实现一个产生token和验证tok ...

  10. selenium设置proxy、headers(phantomjs、Chrome、Firefox)

    phantomjs 设置ip 方法1: service_args = [ '--proxy=%s' % ip_html, # 代理 IP:prot (eg:192.168.0.28:808) '--p ...