admin管理员组

文章数量:1615372

1.iconfont

下载字体图标到本地

1.添加需要的图标到购物车

把鼠标放在图标上面，就会显示购物车，点击加入购物车即可

2.点击右上角的购物车图标，加入购物车列表中

3.选择第一个添加到项目

4.选择创建 好的项目，或者点击右上角添加新项目

5.直接点下载到本地

 此时就会有一个压缩包下载了，解压到当前文件夹，可以将文件名个名字

6.点击index.html即可看见此项目添加的图标

这里面点击Font Class就可以使用图标的类名了（下面那一行）

同时这个页面也有使用步骤。

 7.引入字体图标的样式表

一定是，否则会显示不了iconfont.css

  <link rel="stylesheet" href="./iconfont/iconfont.css">

8.调用图标对应的类名，必须调用两个类名

  • iconfont类：基本样式，包含字体的使用
  • icon-xxx：图标对应的类名

 此时注意：

如果你是通过点击右键翻译中文的情况下，显示图标的类名，在项目使用的时候一定要转回英文，不然可能会出现乱码的类名

 最后，总结引用代码：

  <!-- 1.引入样式表 -->
  <link rel="stylesheet" href="./iconfont/iconfont.css">  
  <!-- 2.调用类名 -->
  <span class="iconfont icon-auto"></span>

字体图标的上传

上传SVG矢量图，生成字体图标

1.点击右上角的上传图标，打开文件夹的svg进行上传即可

 2.如果有带颜色图标，可以点击移除颜色。

 

 3.点击将图标添加到购物车

 4.此时步骤跟上方一样4一样，后续同理。

本文标签： 图标字体iconfont

版权声明：本文标题：iconfont字体图标下载 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1728705098a1170157.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。