web前端之 CSS引入第三方插件

web前端之 CSS引入第三方插件

引入第三方图标插件 - fontawesome

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

1、下载图标插件包

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

2、解压压缩包

web前端之 CSS引入第三方插件

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/
  • 点击需要使用的图标(比如我要使用小汽车的图标)

    web前端之 CSS引入第三方插件

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

    web前端之 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>

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

</body>
</html>

显示效果

web前端之 CSS引入第三方插件

  • 查看更多的例子

    web前端之 CSS引入第三方插件

posted on 2016-08-17 14:35 奋斗中的码农 阅读(...) 评论(...) 编辑 收藏