icomoon字体图标库的使用

最新推荐文章于 2024-01-27 14:32:34 发布

米卡小米

最新推荐文章于 2024-01-27 14:32:34 发布

阅读量604

点赞数 1

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

本文链接：https://blog.csdn.net/cmy741741/article/details/125282608

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.icomoon地址

Icon Font & SVG Icon Sets ❍ IcoMoonIcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.https://icomoon.io/

2.获取字体图标

进入首页

点击右上角按钮 IcoMoon App

进入图标挑选界面，选择合适的目标

上方左边有编辑按钮，点击后可对目标进行编辑操作。

点击右下角按钮 Generate Font 生成字体

点击下方 Download 下载字体，会得到一个压缩包

3.使用字体图标

解压压缩包，把 fonts 文件放到页面根目录下。

打开 style.css 文件

复制这一段到html文件的<style></style>中

点开domo.html文件

复制目标小方块

粘贴到代码合适位置，给目标块的 font-family 设置属性值为

font-family: 'icomoon';

之后就可以给字体图标设置大小和颜色了

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

<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>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?u6h0le');
            src: url('fonts/icomoon.eot?u6h0le#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?u6h0le') format('truetype'),
                url('fonts/icomoon.woff?u6h0le') format('woff'),
                url('fonts/icomoon.svg?u6h0le#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            font-family: 'icomoon';
            font-size: 50px;
            color: blueviolet;
        }
    </style>
</head>

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

</html>