iconfont的图标使用Unicode格式的实现

最新推荐文章于 2024-07-25 10:45:42 发布

qq_41892833

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量2.9k

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_41892833/article/details/122231482

版权

一：准备

将自己需要的图标添加到自己的项目中，如下图所示：
将图标文件下载到本地

二：使用

复制项目里提供的@font-face
具体的使用
方式一：用i标签

方式二：通过伪元素添加图标

三：代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iconfont的Unicode使用</title>
        <style>
            html,
            body {
                height: 100%;
            }
            table,
            th,
            td {
                border: 1px solid black;
            }
            @font-face {
                font-family: "iconfont"; /* Project id 3013887 */
                src: url("./fonts/font_3013887_w4gpn5az95j.woff2")
                        format("woff2"),
                    url("./fonts/font_3013887_w4gpn5az95j.woff") format("woff"),
                    url("./fonts/font_3013887_w4gpn5az95j.ttf")
                        format("truetype");
            }
            /* 方式一： */
            .iconfont {
                font-family: "iconfont";
                font-size: 16px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -webkit-text-stroke-width: 0.2px;
                -moz-osx-font-smoothing: grayscale;
            }
            /* 方式二： */
            .icon-after::after {
                font-family: "iconfont";
                font-size: 16px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -webkit-text-stroke-width: 0.2px;
                /* content: "&#xe658;"; 无效*/
                content: "\e658;"; /* 有效 */
            }
        </style>
    </head>
    <body>
        <h2>我test项目里的icon</h2>
        <!-- 方式一： -->
        <table>
            <tr>
                <th>名称</th>
                <th>图标代码</th>
                <th>图标</th>
            </tr>
            <tr>
                <td>icon-checkbox-checked</td>
                <td>& #xe658;</td>
                <td>
                    <i class="iconfont">&#xe658;</i>
                </td>
            </tr>
            <tr>
                <td>icon-setting</td>
                <td>& #xe78e;</td>
                <td>
                    <i class="iconfont">&#xe78e;</i>
                </td>
            </tr>
        </table>
        <br />
        <!-- 方式二： -->
        <h2>通过伪元素添加图标</h2>
        <div class="icon-after">这里的后面加上图标</div>
    </body>
</html>

qq_41892833

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
iconfont的图标使用Unicode格式的实现

一：准备将自己需要的图标添加到自己的项目中，如下图所示：将图标文件下载到本地二：使用复制项目里提供的@font-face具体的使用方式一：用i标签方式二：通过伪元素添加图标三：代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>iconfont的Unicode使用</title&g
复制链接

扫一扫