字体图标 IcoMoon

最新推荐文章于 2024-05-23 17:56:03 发布

百变珍珑兽

最新推荐文章于 2024-05-23 17:56:03 发布

阅读量80

点赞数

分类专栏： html+css+js 文章标签： css html

本文链接：https://blog.csdn.net/qq_43701213/article/details/132732678

版权

html+css+js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

字体图标

展示的是图标，本质是字体。
轻量级︰一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性:本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器

使用

下载网址： IcoMoon
打开后点击顶部的iconMoonAPP
在这里插入图片描述
选择好自己需要的图标后，点击Generate Font，然后点击download

本地下载了一个名为icomoon的压缩包，解压后包含以下文件。如果需要使用，将fonts文件夹复制到网页的根目录下。

打开style.css，复制此段代码到css样式中，声明字体。

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?ibzba4');
  src:  url('fonts/icomoon.eot?ibzba4#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?ibzba4') format('truetype'),
    url('fonts/icomoon.woff?ibzba4') format('woff'),
    url('fonts/icomoon.svg?ibzba4#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

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

        span {
            font-family: 'icomoon';
            /* 字体可以设置大小与颜色 */
            font-size: 40px;
            color: skyblue;
        }
    </style>
</head>

<body>
    <span>字体图标</span>
</body>

</html>

在这里插入图片描述

字体图标的追加

在icomoon官网中，点击import icons，上传之前文件夹中的selection.json文件，此时会将原有的字体图标全部选中。此时继续选择新的图标，然后重新下载压缩包，并替换原有文件，即可实现对字体图标的追加。
在这里插入图片描述

百变珍珑兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字体图标 IcoMoon

在icomoon官网中，点击import icons，上传之前文件夹中的selection.json文件，此时会将原有的字体图标全部选中。此时继续选择新的图标，然后重新下载压缩包，并替换原有文件，即可实现对字体图标的追加。打开demo.html,样式如图所示，其中方框即为图标的特殊符号，使用时直接复制。选择好自己需要的图标后，点击Generate Font，然后点击download。打开style.css，复制此段代码到css样式中，声明字体。/* 字体可以设置大小与颜色 */展示的是图标，本质是字体。
复制链接

扫一扫