web前端之 CSS引入第三方插件
web前端之 CSS引入第三方插件
引入第三方图标插件 - 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、引用图标代码
- 首先打开图标展示地址 http://fontawesome.io/icons/
-
点击需要使用的图标(比如我要使用小汽车的图标)
-
找到显示小汽车图标的代码
-
使用显示小汽车图标的代码
代码
<!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>
显示效果
-
查看更多的例子