字体图标的下载与引入（icomoon）

最新推荐文章于 2023-01-12 11:19:08 发布

北海道的渔民

最新推荐文章于 2023-01-12 11:19:08 发布

阅读量548

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/Q732125380/article/details/116027004

版权

1、字体图标的下载

推荐下载网站：

icomoon 字库 http://icomoon.io 推荐指数 ★★★★★
IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★
这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI制作图标上传生成。重点是，免费！

2、字体图标的引入

icomoon 字库
第一步
通过添加以下css代码来引用


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

第二步
要特别注意fonts文件的路径问题，要与源程序文件放在通常文件夹下
在这里插入图片描述
以对应代码中的路径才可以正确显示

第三步

打开你下载图标文件夹下的dome
.html文件
在这里插入图片描述

复制后面的小方框到你写的标签之中，并给该标签设置样式

   span{
        font-family: "icomoon";/* 此行内容必须有*/
        color: rgb(7, 191, 247);
      }

<body>
    <span></span>
  </body>

阿里 iconfont **字库

第一步
同为打开下载文件下的dome.html文件
在这里插入图片描述

每个样式引用下面都有教程及代码，不再赘述
在这里插入图片描述

3、字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

在这里插入图片描述

北海道的渔民

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
字体图标的下载与引入（icomoon）

1、字体图标的下载推荐下载网站：icomoon 字库 http://icomoon.io 推荐指数 ★★★★★IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标
复制链接

扫一扫