IconMoon字体图标使用方法

最新推荐文章于 2024-04-11 16:56:21 发布

橘子阿飞

最新推荐文章于 2024-04-11 16:56:21 发布

阅读量724

点赞数 9

分类专栏：前端开发前端基础文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_62242375/article/details/128649166

版权

前端基础同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端开发

8 篇文章 0 订阅

订阅专栏

一、先进入网站

进入 icomoon 字库

第一步：点击：IcoMoon App

第二步：选择图标，并点击：Generate Font

第三步：点击 Download

第四步：将下载文件中的 fonts 文件夹复制到项目根目录下

第五步：打开style.css文件

字体声明，将 `style.css` 文件中的开头的字体声明代码赋值到 html 中

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

第六步：打开 `demo.html`，复制页面中的方框图标到 html 代码中即可。

<body>
    <span></span>
    <span></span>
</body>

此处复制方框也可以到官网复制如下图

第七步：给 `span` 声明字体：

span{

font-family: 'icomoon';
color: pink;

}

结果如下图

第八：如何更新/添加字体图标？

上传 selections.json，添加字体图标，重新生成。下载，更换 @font-face 内容即可

橘子阿飞

关注

9
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
IconMoon字体图标使用方法

IconMoon字体图标使用方法，下载方法
复制链接

扫一扫

专栏目录

IconMoon字体图标使用方法

第一步：点击 ：IcoMoon App

第二步：选择图标，并点击：Generate Font

第三步：点击 Download

第四步：将下载文件中的 fonts 文件夹复制到项目根目录下

第五步：打开style.css文件

字体声明，将 style.css 文件中的开头的字体声明代码赋值到 html 中

第六步：打开 demo.html，复制页面中的方框图标到 html 代码中即可。

此处复制方框 也可以到官网复制 如下图

第七步：给 span 声明字体：

结果 如下图