admin管理员组文章数量:1594755
使用字体图标的目的:使用字体图标技巧实现网页中简洁的图标效果
字体图标
Ø 字体图标展示的是图标,本质是字体。
Ø 处理简单的、颜色单一的图片
Iconfont官网地址 :Iconfont官网地址
下载字体包:
登录(新浪微博) → 选择图标库→ 选择图标,加入购物车→ 购物车→ 添加至项目→ 下载至本地
按上述步骤添加至购物车后,下载至本地
同时我们也可以查看到字体图标的Unicode编码和类名,使用字体图标的时候需要使用到Unicode编码或类名
使用字体图标有两种方式,通过Unicode编码方式、或者类名,下面将分别阐述:
通过Unicode编码方式使用字体图标步骤
1、引入样式表:iconfont.css;
2、复制粘贴图标对应的Unicode编码;
3、设置文字字体。
<!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.0" />
<title>字体图标基本使用-类名</title>
<!-- 1.引入iconfont.css文件 -->
<link rel="stylesheet" href="./iconfont/iconfont.css" />
<style>
i {
/* 3、设置文字字体为iconfont */
font-family: iconfont;
font-style: normal;
font-size: 50px;
color: yellow;
}
</style>
</head>
<body>
<!-- 2.通过i标签把unicode编码复制过来 -->
<i></i>
</body>
</html>
通过类名使用字体图标步骤
1、 引入字体图标样式表;
2、 调用图标对应的类名,必须调用2个类名
(2.1) iconfont类:基本样式,包含字体的使用等
(2.2) icon-xxx:图标对应的类名
<!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.0" />
<title>Document</title>
<!-- 1引入iconfont.css文件 -->
<link rel="stylesheet" href="./iconfont/iconfont.css" />
<style>
.icon1 {
font-size: 100px;
color: antiquewhite;
}
</style>
</head>
<body>
<!--
2.通过i标签承接字体图标
类名:
第一个类名是固定的:iconfont;
第二个类名:通过html文件,直接去复制文字下方的类名即可
-->
<i class="iconfont icon-hanbao icon1"></i>
</body>
</html>
如果图标库没有项目所需的图标怎么办?
1. 与设计师沟通,得到SVG矢量图;
2. IconFont网站上传图标,下载使用。
上传矢量图方法:
1、上传→ 上传SVG图标;2、浏览本地图标→ 去除颜色提交;
3、加入购物车→ 下载使用 。
版权声明:本文标题:阿里妈妈字体图标Iconfont的使用方法 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728201677a1149461.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论