当前位置：首页 > article >正文

前端——阿里图标的使用

article 2024/9/25 5:04:40

阿里图标

将小图标定义成字体，通过引入字体的方式来展示这些图标

1.打开阿里图标库 https://www.iconfont.cn/

2.登录 / 注册一个账号

3.选中你需要使用的图标并且把它加入购物车

4.全部选择完之后点击右上角购物车然后下载代码

5.解压后你下载的文件然后在文件里面找到一个叫 demo_index页面并且打开里面有详细的方法介绍

示例

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 第二种方式  -->
        <link rel="stylesheet" href="./阿里图标/iconfont.css">
        <style>
            /* 第一种方式   */
            @font-face {
                font-family: 'iconfont';

                src: url('./阿里图标/iconfont.ttf') format('truetype');

            }

            .iconfont {
                font-family: "iconfont" !important;
                font-size: 36px;
                font-style: normal;
            }


            .icon {
                width: 1em;
                height: 1em;
                vertical-align: -0.15em;
                fill: currentColor;
                overflow: hidden;
                font-size: 100px;
            }
        </style>


        <!-- 第三种方式引入 -->
        <script src="./阿里图标/iconfont.js"></script>

    </head>

    <body>
        <!-- 第一种用编码格式  -->
        <span class="iconfont">&#xe64f;</span>
        <p class="iconfont">&#xe8f4;</p>


        <!-- 第二种用类名方式   -->
        <span class="iconfont icon-niunai3"></span>
        <p class='iconfont icon-xigua1'></p>


        <!-- 第三种 支持有颜色的图标使用 -->
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xigua"></use>
        </svg>
    </body>

</html>

效果：

练习1:实现如此效果——https://static.zzhitong.com/lesson-files/html/code/15-1.html

代码：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./reset.css">
        <script src="./阿里图标/iconfont.js"></script>
        <style>
            body {
                background-color: #EEEEEE;
            }

            .list {
                width: 700px;
                height: 250px;
                /* background-color: pink; */
                margin: 100px auto;
            }

            .list>li {
                float: left;
                width: 170px;
                height: 80px;
                background-color: #fff;
                /* border: 1px solid red; */
                margin-right: 5px;
                margin-bottom: 5px;
            }


            .ico {
                width: 40px;
                height: 40px;
                /* border: 1px solid red; */
                background-image: url(./1.png);
                background-repeat: no-repeat;
                background-position-y: -160px;

                margin: 10px auto 0px;
            }

            .list>li>p {
                text-align: center;
            }

            /* 高级选择器   选择第二个li子元素  然后在选择对应li里面的第几个子元素    */
            .list>li:nth-child(2)>p:nth-child(1) {
                background-position-y: -200px;
            }

            .list>li:nth-child(3)>p:nth-child(1) {
                background-position-y: -240px;
            }

            .list>li:nth-child(4)>p:nth-child(1) {
                background-position-y: -280px;
            }

            .icon {
                width: 1em;
                height: 1em;
                font-size: 45px;
                text-align: center;
                margin-left: 60px;
            }
        </style>
    </head>

    <body>
        <ul class="list">
            <li>
                <!-- 图标 -->
                <p class='ico'></p>
                <!-- 图标标题 -->
                <p>自由行</p>
            </li>
            <li>
                <p class='ico'></p>
                <p>主题游</p>
            </li>
            <li>
                <p class='ico'></p>
                <p>一日游</p>
            </li>
            <li>
                <p class='ico'></p>
                <p>顶级游</p>
            </li>
            <li>
                <p class='ico'></p>
                <p>顶级游</p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xigua"></use>
                </svg>
                <p>想吃西瓜</p>
            </li>
            <li>
                <p class='ico'></p>
                <p>顶级游</p>
            </li><li>
                <p class='ico'></p>
                <p>顶级游</p>
            </li><li>
                <p class='ico'></p>
                <p>顶级游</p>
            </li><li>
                <p class='ico'></p>
                <p>顶级游</p>
            </li><li>
                <p class='ico'></p>
                <p>顶级游</p>
            </li><li>
                <p class='ico'></p>
                <p>顶级游</p>
            </li>
        </ul>
    </body>

</html>

效果如图：