当前位置：首页 > news >正文

点创网站建设博物馆装饰设计公司

news 2025/9/17 3:24:45

点创网站建设,博物馆装饰设计公司,响应式网站建设策划,厦门网站制作公司官方网址阿里巴巴矢量图标库官网搜索自己需要的图标以主页图标为例，搜索"主页" （这里提供了许多，我们选择其中一个为例） 下载使用 ps:免费的，先注册登录即可（一分钟） 解压…

官方网址

阿里巴巴矢量图标库官网

搜索自己需要的图标

以主页图标为例，搜索"主页"
在这里插入图片描述
（这里提供了许多，我们选择其中一个为例）

在这里插入图片描述

下载使用

ps:免费的，先注册登录即可（一分钟）
在这里插入图片描述

解压使用

解压得到如下散文件
在这里插入图片描述

在demo里边其实已经告诉你怎么用了：1. unicode方案； 2. class类名方案； 3. symbol方案
那就选一个我习惯性用的class类名方案，其他的自己研究一下就会了
在这里插入图片描述

删除多余文件

我们这里使用class类名的方案，所以只需要字体文件iconfont.ttf以及该样式所需要的样式iconfont.css
在这里插入图片描述

样式引入、添加类名

ps：1.最好将字体文件和样式文件放一起！ 2. 类名检查：必须类名（iconfont），以及该图标对应的类名（eg：icon-zhuye）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><link rel="stylesheet" href="./font/iconfont.css">
</head>
<body><i class="iconfont icon-zhuye"></i><b class="iconfont icon-zhuye"></b><em class="iconfont icon-zhuye"></em>
</body>
</html>

效果如下：
在这里插入图片描述

样式调整

如果不满意该图标的样式，添加文字属性相关的样式进行自定义也是支持的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><link rel="stylesheet" href="./font/iconfont.css"><style>#font1 {color: blue;font-size: 50px;}#font3:hover {color: red;cursor: pointer;}</style>
</head>
<body><i class="iconfont icon-zhuye" id="font1"></i><b class="iconfont icon-zhuye"></b><em class="iconfont icon-zhuye" id="font3"></em>
</body>
</html>