icomoon字体图标使用

最新推荐文章于 2024-05-04 15:57:19 发布

弩哥++

最新推荐文章于 2024-05-04 15:57:19 发布

阅读量106

点赞数

分类专栏： CSS 文章标签： dreamweaver

本文链接：https://blog.csdn.net/heiwa110/article/details/131607430

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、字体图标库

第一个是国外的，第二个是阿里的

二、icomoon的简单使用

登录对应的网站地址
选择想要的字体图标
生成字体
下载的文件icomoon.zip
对icomoon.zip文件进行解压，然后把fonts目录，以及css文件，放到对应项目的根目录(可以自行调整)
创建一个html文件

<!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">
    <title>Title</title>
    <link rel="stylesheet" href="./style.css">
    <style>


    </style>
</head>
<body>
    <span class="icon-audi"></span>
    <span class="icon-opensuse"></span>
    <span class="icon-twitter"></span>

</body>

</html>

图标的类名，可以查看下载的icomoon.zip文件中的demo.html

弩哥++

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
icomoon字体图标使用

一、字体图标库第一个是国外的，第二个是阿里的https://icomoon.io/https://www.iconfont.cn/二、icomoon的简单使用登录对应的网站地址选择想要的字体图标生成字体下载的文件icomoon.zip对icomoon.zip文件进行解压，然后把fonts目录，以及css文件，放到对应项目的根目录(可以自行调整)...
复制链接

扫一扫

专栏目录