1122下载图标并应用

与生俱来123

于 2022-11-23 19:05:26 发布

阅读量51

点赞数

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

本文链接：https://blog.csdn.net/qq_62919289/article/details/127985826

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

搜索网站

www.iconfont.com

下载图标

添加购物车后，添加至项目，然后下载至本地

VScode里打开下载的文件包

应用图标

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

标签类名

标签类目取两个，一个是iconfont，一个是图标的文件名（没有点）

图标文件在下载的文件中的demo.html打开看见

<body>
    <i class="iconfont icon-setting-filling "></i>
    <i class="iconfont icon-bottom "></i>
    <i class="iconfont icon-fabulous "></i>
    <i class="iconfont icon-notification "></i>
    <i class="iconfont icon-arrow-left-bold "></i>
</body>

修改样式

必须用类名修改，不能用标签名修改

<style>
        .iconfont {
          font-size: 60px;
          color: aqua;
        }
    </style>

购物车项目

    <link rel="stylesheet" href="../font_3786220_q46gvwbewjn/iconfont.css">
    <style>
        * {
        margin: 0;
        padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            color: #333;
            text-decoration: none;
        }
        .nav {
            width: 200px;
            margin: 50px auto;
            font-size: 12px;
        }

        .orange {
            color: orange;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-maijiagouwuche orange"></span>
                    <span>购物车</span>
                    <span class="iconfont icon-arrow-down"></span>

                </a>
            </li>
        </ul>
    </div>
</body>