字体图标的使用

站长

2022年09月08日 16:33 · 阅读数 274

1 进入网站 https://icomoon.io/app/#/sele... 下载字体字体图标的使用 2 将下载下来的文件解压，将fonts文件夹放入项目根目录3 拷贝style.css文件中的"@font-face"对象拷贝进style，引用字体@font-face {

    font-family: "icomoon";
    src: url("fonts/icomoon.eot?25srv6");
    src: url("fonts/icomoon.eot?25srv6#iefix") format("embedded-opentype"),
      url("fonts/icomoon.ttf?25srv6") format("truetype"),
      url("fonts/icomoon.woff?25srv6") format("woff"),
      url("fonts/icomoon.svg?25srv6#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

4 拷贝字体的特殊符号即可使用，并且特殊字符就是字体，可以设置font相关的属性字体图标的使用

详情代码如下：

<!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>字体图标的使用</title>
<style>
  /* 1 进入网站 https://icomoon.io/app/#/select/font 下载字体
  2 将下载下来的文件解压，将fonts文件夹放入项目根目录
  3 拷贝style.css文件中的"@font-face"对象拷贝进style，引用字体
  4 拷贝字体的特殊符号即可使用，并且特殊字符就是字体，可以设置font相关的属性 */
  @font-face {
    font-family: "icomoon";
    src: url("fonts/icomoon.eot?25srv6");
    src: url("fonts/icomoon.eot?25srv6#iefix") format("embedded-opentype"),
      url("fonts/icomoon.ttf?25srv6") format("truetype"),
      url("fonts/icomoon.woff?25srv6") format("woff"),
      url("fonts/icomoon.svg?25srv6#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

  span {
    font-family: "icomoon";
    font-size: 100px;
    color: pink;
  }
</style>

</head> <body>

<span></span>

</body></html>

补充：如何追加新的字体图标呢？场景：如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。把压缩包里面的selection.json从新上传，然后选中自己想要的心图标，重新下载压缩包，并替换原来的font文件夹即可。具体步骤：1 打开网站 https://icomoon.io/，点击右上角IconMoon App按钮

字体图标的使用 2 在新开的页面中点击左上角 Import Icons按钮，选择上传之前的selection.json文件之前的字体就显示出来了3 选择要添加的新字体图标，然后点击右下角的 Generate Font图标，然后下载得到新的icomoon文件夹，替换原来的文件夹即可。