优秀的编程知识分享平台

网站首页 > 技术文章 正文

如何在网页中运用字符做图标，iconfont的使用「219」

nanyue 2024-10-02 17:54:16 技术文章 23 ℃
  • 在网页中很多小的图标不一定是图片。
  • 通过字符符号做出来的图标，可以矢量放大，更加方便实用。
  • 这里就学习一下如何在网页中加入iconfont。
  • 更多的文章请关注我的头条号，我是落笔承冰。

一、创建一个空白的html网页test1.html。

二、浏览器中打开iconfont的官网https://www.iconfont.cn/。

三、注册并登录iconfont网站，注册这步我就不说了，但凡有点智商的人都知道如何注册。注册之后，点击“我的项目”创建一个项目。

四、简单给项目起个名，做个描述什么的，其它默认就可以了。

五、然后，我们再进入图标库去选图标吧。

  • 点选你看中的图标，放入购物车。
  • 网页右上角的购物数量会随你的选择而增加。

六、点击右上角的购物车，然后我们把选好的图标添加到项目中去。

七、进入项目看一下，好吧，我一共选了8个图标。

八、接下来，就是要用这些图标的时候了，点击项目中的“下载至本地”。

九、它是一个压缩文件，你解压它，会发现有很多文件。

十、这些文件，我选中的才是有用的，就是iconfont.css和字体文件，其它都没有用。

十一、我把这些文件拷贝到相应的目录下，这里我拷贝到css文件夹中。

十二、我们开始试着调用它们吧，创建一个盒子，加两个字“搜索”。

十三、引入iconfont.css文件，并调用iconfont样式。

十四、从官网中找到图标对应的代码，然后粘贴到你想要添加的位置就可以了。

十五、最后你可以像普通字符一样调整它们的大小。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="./css/iconfont.css">
 <style>
 .size30{
 font-size: 30px;
 }
 </style>
</head>
<body>
 <div class="iconfont">
 <span class="size30"></span>搜索
 </div>
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表