引入第三方图标插件 - fontawesome

官网地址：http://fontawesome.io/

1、下载图标插件包

下载地址：https://codeload.github.com/FortAwesome/Font-Awesome/zip/master

2、解压压缩包

3、导入插件的css

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="Font-Awesome-master/Font-Awesome-master/css/font-awesome.css" />

</head>

<body>

</body>

</html>

4、引用图标代码

  • 找到显示小汽车图标的代码

  • 使用显示小汽车图标的代码

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="Font-Awesome-master/Font-Awesome-master/css/font-awesome.css" />

</head>

<body>

    <i class="fa fa-car" aria-hidden="true"></i> 

</body>

</html>

显示效果

  • 查看更多的例子

web前端之 CSS引入第三方插件的更多相关文章

  1. vue-cli项目中引入第三方插件

    前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...

  2. Web前端开发实用的Chrome插件

    Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录 ...

  3. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  4. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  5. Web前端开发人员实用Chrome插件收集

    越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...

  6. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  7. ionic3.0--angular4.0 引入第三方插件库的方法

    ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings  2.搜索你 ...

  8. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  9. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

随机推荐

  1. 高效求幂取余 算法，复杂度 log(n)

    做TopCoder SRM 576 D2 L3 题目时,程序有个地方需要对一个数大量求幂并取余,导致程序运行时间很长,看了Editoral之后,发现一个超级高效的求幂并取余的算法,之前做System ...

  2. JMeter分布式性能测试

    利用JMeter进行负载测试的时候,使用单台机器模拟测试超过1000个行程的并发就有些力不从心,在执行的过程中,JMeter自身会自动关闭,要解决这个问题,可以使用分布式测试,运行多台机器运行所谓的  ...

  3. 设置程序图标-初识IOS

    相信我们都很喜欢做出的程序弄成自己的图标. 在创建项目过后显示的页面中,选择App lcons and launch images,  点击App lcons Source 之后的方向符号,把里面的东 ...

  4. VC 串口通信类

    为了节省时间,我就贴出来吧 头文件 SerialPort.h /******************************************************************** ...

  5. hdu 5586 sum

    Problem Description There is a number sequence A1,A2....An,you can select a interval [l,r] or not,al ...

  6. CODEVS 3137 栈练习1

    3137 栈练习1 时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 给定一个栈(初始为空,元素类型为整数,且小于等于100),只 ...

  7. 慕课linux学习笔记（七）常用命令（4）

    帮助命令 Man命令 Man的级别 命令帮助 可被内核调用的函数帮助 函数和函数库帮助 特殊文件帮助 /dev 配置文件帮助 游戏的帮助 其他杂项的帮助 管理员可用命令帮助 内核相关文件的帮助 -f ...

  8. CentOS和Ubuntu的区别

    CentOS(Community ENTerprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照开放源代码规定释出的源代 ...

  9. mac qq截图功能失效后，如何重启截图功能？

    在finder中打开应用程序目录,找到QQ,右键单击QQ,选择显示包内容,此时会打开一个文件夹. 进入以下路径Library/LoginItems然后双击ScreenCapture这个进程,截图功能即 ...

  10. Android再学习-20140928-布局

    关于布局中的单位 PX是像素,这个没有问题.另外还有两个单位,一个是dp,这个是个相对单位,在任何分辨率的屏幕上显示效果是一样的,所以用dp来进行控件的大小设置.另外,字体的设置推荐用sp,这样字体可 ...