字体图标 IcoMoon

news2024/9/23 15:31:33

字体图标

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

使用

下载网址： 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>