引入第三方图标插件 - 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. C++11下的线程池以及灵活的functional + bind + lamda

    利用boost的thread实现一个线程类,维护一个任务队列,以便可以承载非常灵活的调用.这个线程类可以方便的为后面的线程池打好基础.线程池还是动态均衡,没有什么别的.由于minGW 4.7 对 C+ ...

  2. LoadRunner录制回放脚本RecContentType=application/json报错

    今天做一个新项目,项目系统的框架是用SSH,特意查看了一下项目源码,用的ajax提交比较多,主要的问题是该系统对IE(8~10)浏览器都不兼容,无法进行录制. 是问题,总有解决的办法! 我本机为Loa ...

  3. Android-IM架构设计

    ###1. 架构总览 ###2. 模块介绍 ####2.1 协议封装与任务流程 #####1) 协议与任务的封装 a. 协议有协议头(协议头因为格式相同,被抽象出来)和协议体组成,协议有两类:请求协议 ...

  4. NFinal 控制器—URL

    URL路由规则 规则:http://网址/模块名/控制器的相对路径的文件名/函数名.htm 例: http://localhost/App/IndexController/Index.htmhttp: ...

  5. VPN错误789：L2TP连接尝试失败

    VPN 错误789:l2tp 连接尝试失败,因为安全层在初始化与远程计算机的协商时遇到一个处理错误 Windows配置VPN,选择“使用IPsec的第2层隧道协议(L2TP/IPSec)”时, XP系 ...

  6. .net 调用Oracle.Data.Access 组件提供的用于批量操作的方法—获取数据库表结构方法和跟参数赋值方法

    1./// <summary> /// 获取当前目标表结构 /// </summary> /// <param name="tableName"> ...

  7. Android成长记(1)-----android环境搭建与adb shell 命令

    整理一下学习android一步一步存下来的自己总结或是从网上摘抄的比较不错的文档,电脑要上交了,最舍不得的就是自己积累的这么点东西了,所以决定发布到黎梓小站,以供大家一起学习以及自己日后忘记了也有地方 ...

  8. PHP 读取EXCEL

    PHPExcel 自己下载. PHP读取EXCEL public function import_Excel($file_name){ include_once LIB_ROOT_PATH." ...

  9. SQL 标准中的四种隔离级别

    READ UNCOMMITED(未提交读) 在RERAD UNCOMMITED级别,事务中的修改,即使没有提交,对其他事务也都是可见的.事务可以读取未提交的数据,这也成为脏读(Dirty Read). ...

  10. seajs模块压缩问题

    在优化整理项目代码时,想使用seajs来把代码模块化.看了下官方5分钟上手教程,觉得很不错,也没多想就一直开发下去了,也没出什么问题.等一同事说把代码打包个放到设备上去测试一下,发现怎么也跑不起来,郁 ...