引入第三方图标插件 - 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. <!DOCTYPE html>的问题

    <!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <html> 标签之前.该标签告知浏览器文档所使用的 HTML 规范. doctype 声明不属于 ...

  2. 工程与科学数值方法的Matlab实现

    %stats.m function [mean,stdev]=stats(x) n=length(x);mean=sum(x)/n;stdev=sqrt(sum((x-mean).^2/(n-1))) ...

  3. Tomcat项目部署方式

    一.静态部署 1.直接将web项目文件件拷贝到webapps 目录中      Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应用.所以可以将JS ...

  4. 查看kafka的group.id

    kafka/config目录下的consumer.properties中可以看到

  5. gridView 布局间距合理化的有效办法

    网上有很多人闻到过这个问题,给出好多办法,多数人并不是意见提的不对,而是没有抓住问题的本质 . 因为我要做一个girdView的demo实例,遇到了这个问题 与大家一起分享,如果有想要demo的请给我 ...

  6. 18 java 代理模式 （转）

    静态代理 1.新建一个接口,这个接口所提供的方法是关于数据库操作的 public interface EmployeeDao { public void updateSalary(); } 2.建一个 ...

  7. hdu 畅通工程续

    算法:多源最短路(floyd) 题意:有多个城镇,有些之间有通路,给你起点和终点,输出最短路径: Problem Description 某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路 ...

  8. HDU 4268 Alice and Bob set用法

    题目地址: http://acm.hdu.edu.cn/showproblem.php?pid=4268 贪心思想,用set实现平衡树,但是set有唯一性,所以要用 multiset AC代码: #i ...

  9. Linux 下源码安装JDK

    一,找到.tar.gz源码包 将jdk1.XXXXXXX.tar.gz源码包放在你想方的位置,比如我就放到u盘的 1,   mkdir /mnt/udisk                       ...

  10. Android开发之打开闪光灯录制视频

    Android的SDK在线API上对录制视频的方法.步骤都写得非常清楚,但是如果没有一点思路,写起来也比较式费事.录制视频的全过程要打开闪光灯(可能是因为项目需要,或者特殊原因),则必须按照一定的顺序 ...