小白前端学习笔记（一）使用Font Awesome引用icon图标到网页

程序员文章站 2024-02-16 12:47:34

...

小白前端学习笔记（一）使用Font Awesome引用icon图标到网页

一直以来都在为网页没有图标而苦恼，不得不说没有图标的网页实在是丑的一批。一直以来都用图片作为图标，但老实说，还不如不用。今天才发现一个大佬的图标库，好像还挺出名的，由于我是小白，今天才刚接触到，感觉解决了一大难题，现在先记录下来使用的方法，以防忘记。

一.到官网下载文件包（非必须）

小白前端学习笔记（一）使用Font Awesome引用icon图标到网页
文件不大，只有几百K，我下载的版本是4.7.0
官网地址：下载
直接下载地址：下载

二.把下载的压缩包解压，放到项目中

最好放到样式文件专用文件夹下
小白前端学习笔记（一）使用Font Awesome引用icon图标到网页

三.在网页中引用css文件下的font-awesome.min.css文件

由于今天刚刚接触，所以就只记录图标的用法，关于字体的用法和其它文件的作用以后再记录。

小白前端学习笔记（一）使用Font Awesome引用icon图标到网页
这里用两个文件都行，不过font-awesome.css一般是学习用，开发还是用font-awesome.min.css。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
   <link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
<body>
</body>

</html>

文件路径根据自己的实际路径填写

注：不下载文件的话直接使用CDN引用：

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

四.在网页中使用图标

先来到官网找到自己想使用的图标，复制后面的文件名

小白前端学习笔记（一）使用Font Awesome引用icon图标到网页
官网给出的使用方法是，应该是可以使用其它方法，还没测试，
把复制的图标名替换上面的“图标名”，放到要使用的地方。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
    <style type="text/css">
          * {
            padding: 0;
            margin: 0;
        }


        ul li {
            position: relative;
            left: 0;
            width: 300px;
            height: 50px;
            background-color:gray;
            color: white;
            text-align: center;
            font-size: 30px;
            list-style-type: none;
            margin-bottom:2px;
        }
    </style>
</head>

<body>
    <ul>
        <li><i class="fa fa-address-book"></i>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
</body>
</html>

效果：
小白前端学习笔记（一）使用Font Awesome引用icon图标到网页
有点不好看，样式可以后面调整。

注意：要在图标名前加fa fa-，在这里卡了半天。

详情去官网了解：http://fontawesome.dashgame.com/#basic