在网页中使用fontawesome图标库

最新推荐文章于 2023-10-17 17:34:32 发布

极客研究者

最新推荐文章于 2023-10-17 17:34:32 发布

阅读量794

点赞数 1

分类专栏：前端文章标签： html css3 css

本文链接：https://blog.csdn.net/qq_34550459/article/details/105466473

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

图标字体:
在网页中经常需要使用图标,可以通过图片引入图标
但图片本身大小比较大,不好控制

     在使用图标时,可以将图标直接设置为字体处理 
    fontawesome图标字体类库的使用
    1.下载解压后
    2.将css和webfont两个文件下复制到当前项目下(位于同一级目录下)
    3.将all.css引入到当前网页
    4.使用图标字体
        直接通过类名使用图标字体
        可以直接通过css改变图标的样式,不会失真

中文网站下载是收费的,我这有以前下载好的。
Address:
链接：https://pan.baidu.com/s/1zjS26rBTuf_XDgImQkK8HA
提取码：m5fo
下载好解压:
在这里插入图片描述
复制到项目中:

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./icon/css/all.css">
    <title>图标字体</title>

    <style>
        /*
        图标字体:
        在网页中经常需要使用图标,可以通过图片引入图标
         但图片本身大小比较大,不好控制

         在使用图标时,可以将图标直接设置为字体处理
         
        fontawesome图标字体类库的使用
        1.下载解压后
        2.将css和webfont两个文件下复制到当前项目下(位于同一级目录下)
        3.将all.css引入到当前网页
        4.使用图标字体
            直接通过类名使用图标字体

         可以直接通过css改变图标的样式,不会失真
        */
    </style>
</head>
<body>
    
    <i class="fa fa-bell" style="font-size:50px;color:seagreen"></i>
    <i class="fa fa-stop" style="font-size:100px;color: red;"></i>
    <i class="fas fa-otter" style="font-size:200px;color: springgreen;"></i>
    <i class="fa fa-angle-down"> </i>
    <i class="fa fa-map-marker-alt"></i>
</body>

具体想使用什么样的图标:
可以去官网查看API,或者通过之前我的博客分享的离线API包,下载fontawesome库,查看图标对应的class以及unicode编码
在这里插入图片描述

极客研究者

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
在网页中使用fontawesome图标库

图标字体:在网页中经常需要使用图标,可以通过图片引入图标但图片本身大小比较大,不好控制在使用图标时,可以将图标直接设置为字体处理 fontawesome图标字体类库的使用 1.下载解压后 2.将css和webfont两个文件下复制到当前项目下(位于同一级目录下) 3.将all.css引入到当前网页 4.使用图标字体直接通过...
复制链接

扫一扫