60图标字体

最新推荐文章于 2023-07-06 22:56:08 发布

广东码农

最新推荐文章于 2023-07-06 22:56:08 发布

阅读量56

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/117898844

版权

css

html+css 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <title>图标字体</title>
</head>
<body>
    <!-- 
        图标字体（iconfont）(使用图标字体也需要注意版权问题！)
            - 在网页中经常需要使用一些图标，可以通过图片来引入图标
              但是图片大小本身比较大，并且非常不灵活，图片在一定条件下也是会失真
            - 所以在使用图标时，我们还可以将图标直接设置为字体，
              然后通过font-face的形式来对字体进行引入
            - 这样我们就可以通过使用字体的形式来使用图标

        使用
            可以在搜索引擎中搜索“图标字体”
            国内比较有名的就是阿里巴巴的iconfont
            这里我们用国外的：font awesome（网址：https://fontawesome.com/）
            点击start for free；下拉找到download，点击；
            Download Font Awesome Free for the Web点击；
            font awesome的文档也可以在zeal中查看
            1.下载完解压
            2.将css、webfonts移动到项目中，css和webfont必须在同一级目录下
            3.将all.css引入到网页
            4.使用图标字体
                -直接通过类名来使用图标字体
                <div class="fas fa-phone-volume"></div>
                还有一些是fab，具体上网查
                -可以通过设置字体的方式去设置这些图标
                    font-size
                    color    
     -->
    <div class="fas fa-phone-volume"></div>
    <div class="fas fa-dog" style="font-size: 80px;color: tomato;"></div>
</body>
</html>