2022.3.17内容总结

阿里IconFont与IcoMoon：矢量图标与网页应用实践

最新推荐文章于 2025-12-02 22:03:53 发布

原创最新推荐文章于 2025-12-02 22:03:53 发布 · 317 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html #css3

本文介绍了阿里IconFont和IcoMoon这两个常用的矢量图标库，包括注册、搜索、下载和在HTML中的使用方法，还涉及了HTML5的字体图标、CSS样式、伪元素和类名调用等技术应用。

1.字体图标的使用

Icon Font & SVG Icon Sets ❍ IcoMoon (国外的网站，进入速度可能会慢一点)

iconfont-阿里巴巴矢量图标库阿里官方推出的字体图标重点是免费，而且用法也比较简单)

icomoon

1.登入Icon Font & SVG Icon Sets ❍ IcoMoon

2.点击正在上传…重新上传取消

3.选择想要的图标，此处我任选几个正在上传…重新上传取消

4.下载到本地并解压到iconnmoon文件夹

5.使用方法：

此处使用三种方法：其中第三种方法最为简单

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>Document</title>
    <link rel="stylesheet" href="./iconmoon/style.css">
    <style>
        /* 引入字体图标 并且要更改文件路径 */
        @font-face {
            font-family: 'icomoon';
            src: url('./iconmoon/fonts/icomoon.eot?40jj8c');
            src: url('./iconmoon/fonts/icomoon.eot?40jj8c#iefix') format('embedded-opentype'),
                url('./iconmoon/fonts/icomoon.ttf?40jj8c') format('truetype'),
                url('./iconmoon/fonts/icomoon.woff?40jj8c') format('woff'),
                url('./iconmoon/fonts/icomoon.svg?40jj8c#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            /* 声明 */
            font-family: 'icomoon';
        }

        i::before {
            /* 必须要加反斜杠转译 */
            content: '\e91c';
            /* 必须要声明 */
            font-family: 'icomoon';
            /* 取消倾斜 */
            font-style: normal;
        }
    </style>
</head>

<body>
    <!-- 使用方法一:直接使用 -->
    <span></span>
    <!-- 使用方法二：利用伪元素使用 -->
    <i></i>
    <!-- 使用方法三：调用类名使用  此时必须要引入font里面的style.css-->
    <b class="icon-connection"></b>
</body>

</html>

iconfont 阿里妈妈字体库

1.登入iconfont-阿里巴巴矢量图标库

2.可搜索想要的图标正在上传…重新上传取消

3.选择图标，并下载正在上传…重新上传取消

4.将解压完成的文件存放在iconfont文件夹中

5.使用：

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/font_3259708_114vvnjd6w6f/iconfont.css">
    <style>
        body {
            font-size: 32px;
        }

        /* 使用方法一 引入iconfont.css文件声明 */
        @font-face {
            font-family: "iconfont";
            /* Project id 3259708 */
            /* 更改路径 */
            src: url('./iconfont/font_3259708_114vvnjd6w6f/iconfont.woff2?t=1647657703210') format('woff2'),
                url('./iconfont/font_3259708_114vvnjd6w6f/iconfont.woff?t=1647657703210') format('woff'),
                url('./iconfont/font_3259708_114vvnjd6w6f/iconfont.ttf?t=1647657703210') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        span {
            /* 必须要字体声明 */
            font-family: "iconfont" !important;
        }

        i::before {
            font-family: "iconfont" !important;
            /* 伪元素content里面必须要写转译的 */
            content: "\e604";
            font-style: normal;
        }

        p {
            /* 必须要声明 */
            font-family: "iconfont" !important;
        }
    </style>
</head>

<body>
    <!-- 方法一：找到demo_index.html网页打开，找到自己想要的图标，然后复制粘贴 -->
    <span>&#xe61a;</span>
    <!-- 方法二：伪元素使用字体图标 -->
    <i></i>
    <!-- 方法三：直接调用类名使用，前提是必须要引入iconfont.css文件 前两种不需要，但是第三种更简单 -->
    <p class="icon-tubiao2"></p>
</body>

</html>

2.省略号（不需要记忆，单行多行网上搜索直接复制粘贴推荐由后端来做这一块）

单行：

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>Document</title>
    <style>
        p {
            width: 150px;
            height: 50px;
            border: 1px solid red;
            margin-left: 150px;
            //注释：强制一段文字不换行
            white-space: nowrap;
            //注释：溢出隐藏
            overflow: hidden;
            //注释：超出部分的文本以省略号显示
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <p>我终于看到，思念到死的脸庞，追逐的脸，永远在我的身旁</p>
</body>

</html>

多行：

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>Document</title>
    <style>
        p {
            width: 200px;
            height: 150px;
            border: 1px solid red;
            margin-left: 50px;
            text-overflow: ellipsis;
            display: -webkit-box;
            //设置为弹性盒子
            -webkit-box-orient: vertical;
            //控制显示几行
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <p>你是我这一辈子都不想失恋的爱，我终于等到，等到梦醒的时分，不管有多少前途未知的坎坷，不用去管，也不用去问</p>
</body>

</html>

3.图片模糊处理函数blur（）

blur（）单位是px

filter：blur（xpx）数值越大，模糊程度越高

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>Document</title>
    <style>
        .box {
            margin: 0 auto;
        }

        .box img {
            filter: blur(13px);
            transition: all .5s;
        }

        .box img:hover {
            filter: blur(0);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/niu1.webp" alt="美女照片">
    </div>
</body>

</html>

4.calc计算函数的使用

calc计算函数，主要作用：自动计算

案例：让子盒子始终比父盒子少60px

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            background-color: pink;
        }

        .box .son {
            margin: 0 auto;
            width: calc(100% - 60px);
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <!-- 需求：子盒子的宽度永远比父盒子的宽度小60px -->
    <div class="box">
        <div class="son"></div>
    </div>
</body>

</html>

5.过渡

transition: 过渡的属性过渡时间速度曲线何时开始;

通常是 transition：all .5s；

过渡时间必须要加单位

进度条案例

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>进度条案例</title>
    <style>
        .box {
            width: 200px;
            height: 30px;
            border: 1px solid red;
            border-radius: 15px;

        }

        .box .son {
            width: 30%;
            height: 100%;
            border-radius: 15px;
            background-color: red;
            transition: all .5s;
        }

        .box:hover .son {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>

</html>

6.三角的制作（边框）

首先看一下边框的样子

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>Document</title>
    <style>
        div {
            width: 0;
            height: 0;
            margin: 0 auto;
            border-width: 30px;
            border-style: solid;
            border-color: red yellow green pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

案例演示如下：正在上传…重新上传取消

那么想要三角，只需要将其他的边框颜色设置为透明色transparent

要求，只留下绿色的三角

分析:上边框宽度为0 左右下边框宽度不变，左右边框颜色变为透明色

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>Document</title>
    <style>
        div {
            width: 0;
            height: 0;
            margin: 0 auto;
            border-width: 0px 30px 30px 30px;
            border-style: solid;
            border-color: transparent transparent green transparent;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

显示结果如下：正在上传…重新上传取消

想要不同的三角形，只需改变border-weight就可以

7.今日案例

1.京东秒杀案例（三角形）

如图：正在上传…重新上传取消

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* box-sizing: border-box; */
        }

        .box {
            width: 160px;
            height: 40px;
            background-color: #fff;
            border: 1px solid red;
            margin: 0 auto;
            text-align: center;
            font-size: 12px;
            color: #ccc;
            line-height: 40px;
            text-decoration: line-through;
            margin-top: 50px;
        }

        .box .left {
            position: relative;
            float: left;
            width: 100px;
            text-align: center;
            height: 40px;
            background-color: red;
            color: #fff;
            font-size: 16px;

        }

        /* 三角做法 */
        .left::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            border-width: 40px 12px 0px 0px;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
        }
    </style>
</head>

<body>
    <!-- css三角做法 -->
    <div class="box">
        <div class="left">
            ￥1352元
        </div>
        1220元
    </div>
</body>

</html>

2.鼠标经过大盒子，从底部缓缓升起一个小盒子（主要利用定位和过渡实现）

代码如下

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>底部上升案例</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 500px;
            margin: 0 auto;
            background-color: pink;
            overflow: hidden;
        }

        .mark {
            position: absolute;
            bottom: -300px;
            left: 0;
            width: 300px;
            height: 100px;
            font-size: 30px;
            font-weight: 700;
            text-align: center;
            background-color: #27ba9b;
            transition: all .5s;
        }

        .box:hover .mark {
            bottom: 0px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="mark">吹面不觉杨柳风<br />错把少女当做宝</div>
    </div>
</body>

</html>

3.太极案例

这是一个比较好玩的案例

案例中主要用到了边框和定位

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <title>太极</title>
    <style>
        body {
            background-color: #ccc;
        }

        div {
            position: relative;
            width: 150px;
            height: 300px;
            background-color: #fff;
            border-left: 150px solid #000;
            border-radius: 50%;
            margin: 100px auto;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: rotate 2s linear infinite;
        }

        div::before,
        div::after {
            content: "";
            position: absolute;
            left: -75px;
            width: 30px;
            height: 30px;
            border: 60px solid #000;
            border-radius: 50%;
        }

        div::before {
            top: 0;
            background-color: #fff;

        }

        div::after {
            bottom: 0;
            background-color: #000;
            border-color: #fff;
        }

        @keyframes rotate {
            0% {

                transform: scale(0) rotate(0deg);
            }

            100% {

                transform: scale(3) rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>