第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-xxx"></span>具体实现如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="download/iconfont.css"> <style> .iconfont { font-size: 100px; } </style> </head> <body> <span class="iconfont icon-zhifumima"></span> </body> </html>之前没搞懂阿里爸爸矢量库的用法,今天来演示一下正确的 阿里巴巴矢量库刚下载下来是一个压缩包,包含这些文件。我们只需要以下几个文件: 将他们放在我们的html文件夹中(最好新建一个fonts的文件夹用以保存),像我这样 然后在iconfont.css文件下寻找复制以下这段话,就是到.iconfont以前的所有东西到你的css中 因为我之前修改了文件路径,所以我们这里也要改一下路径。最后复制到css样式中如下 然后打开压缩包里的html文件 接下来复制以下代码 最后引入样式 最后说两句重要的,这样的形式是直接插入到标签中哦,想通过伪类的方法就要把&#x用\代替。
.iconfont::before { content: '\e60e'; }