CSS,font awesome和iconfont引入图标,并改变图标大小,颜色的方法

1.font awesome

 (1)在官网上下载图标库文件

CSS,font awesome和iconfont引入图标,并改变图标大小,颜色的方法

(2) 代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">   引入图标库

    <style>

        span.plane{                                 //span标签.对应图标所设置的属性值对相应图标进行操作

            color:#ccc;                                //图标颜色

            font-size:100px;                         //图标大小

        }

        span:hover{

            color:blue;

        }

        i{

            font-size:10px;

        }

    </style>

</head>

<body>

    <span class="fa fa-plane plane"></span>   //引用图标    class="fa fa-图标名称 设置class属性值"

    <i class="fa fa-pencil"></i>

</body>

</html>

2.iconfont

(1)进入官网找到所需图标加入购物车

CSS,font awesome和iconfont引入图标,并改变图标大小,颜色的方法

 

(2)添加至项目,点击确定

CSS,font awesome和iconfont引入图标,并改变图标大小,颜色的方法

 (4)点击下载至本地

 (5)复制图标代码

CSS,font awesome和iconfont引入图标,并改变图标大小,颜色的方法

(6)代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="../iconfont/iconfont.css">

</head>

<body>

    <span class="iconfont icon-wode"></span>   //class="iconfont 下载的图标的代码“

    <i class="iconfont icon-youjiantou"></i>

    <i class="iconfont icon-zuojiantou"></i>

</body>

</html>