html+css自定义图标字体icomoon如何使用

最新推荐文章于 2024-04-22 14:21:48 发布

又1个晴天

最新推荐文章于 2024-04-22 14:21:48 发布

阅读量401

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/Shasha_Bai/article/details/113961616

版权

icomoon 可以将.svg结尾的文件，生成字体图标,。字体图标放大缩小的时候不会失真。
1.打开在线生成工具：https://icomoon.io/app/#/select
2. 导入本地文件或者选择图标库
如果你本地有自己下载过的.svg文件，可以直接将文件拖拽到页面上
a.点击左上角那个三横的那个按钮
在这里插入图片描述
b.选择新建一个图集

c.将本地.svg文件拖拽到页面上

这时候浏览器会问你：你的SVG字体中的符号已加载。导出字体时使用此字体的metrics和元数据吗？你只要点击yes就好。
在这里插入图片描述
这样文件就导入啦！！！
或者你也可以点击图集左上角按钮，选择文件导入。

d.单击小方框就可以复制了

如果你本地没有.svg图标，你可以选择在线免费的图标。
a.选择一些你所需要的图标
b.然后点击右下角的 Generate Font。
在这里插入图片描述
然后页面自动跳转到下图页面。

c.点击页面右下角的font download可以将字体文件下载到本地（图标的名称都是可以自己命名的）。

d.下载之后需要解压,解压完是图片这样
e.再点击demo.html,进入页面就是刚刚你选择的一些图标，就可以复制了。
4.应用
把fonts文件夹和style.css放到项目中
在这里插入图片描述
写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="lianxi.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <i class="pos"></i>
        北京
    </div>
</body>
</html>

.pos{
    font-family: "icomoon";
    font-style: normal;
    font-size: 14px;
    color: #f10215;
}

其中的，就是复制的位置图标。
在这里插入图片描述

实现效果如图。
在这里插入图片描述

又1个晴天

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html+css自定义图标字体icomoon如何使用

打开在线生成工具：https://icomoon.io/app/#/select导入本地文件或者选择图标库如果你本地没有.svg图标，你可以选择在线免费的图标。选择一个你想要的icons如果你本地有自己下载过的.svg文件，可以直接将文件拖拽到页面上这时候浏览器会问你：你的SVG字体中的符号已加载。导出字体时使用此字体的metrics和元数据吗？你只要点击yes就好。...
复制链接

扫一扫