IconFont使用方式简介

41 篇文章 0 订阅
19 篇文章 2 订阅

一、在线引入方式

1.iconfont中选择需要的图标,加入购物车

图1

2.点击图1所示的购物车,弹出如图2所示的弹框。

依次点击 添加至项目---》选择需要添加的项目---》再点击确定,跳转到如图3所示的页面

图2

3.点击图3中 “unicode" "font class" "symbol"可以选择iconfont的引入方式。

图3

注:有些字体图标不能用symbol方式使用

        点击图3所示的,"点击复制代码",ctrl+v,在浏览器中打开.js文件,即可查看,如果要使用的图标有对应的id,则可以用symbol方式使用,否则不可以用symbol方式。

图4

4.如图3所示选择iconfont的引入方式后,点击”点此复制代码“,再ctrl+v粘贴到项目的全局样式文件中

 其中 font class方式是.css文件----可以直接在浏览器中打开

symbol方式是.js文件------可以直接在浏览器中打开

5.全局引入iconfont.css样式文件

  如:vue项目一般在 main.js文件中引入

import "./assets/css/iconcss/iconfont.css";

6.使用iconfont:注使用方式和引入iconfont的方式要一致。

  1)unicode方式

     unicode使用图标,如:

<i class="iconfont">&#xe604;</i>

   2)font class方式

    通过class使用图标,如:icon-24px;

<i class="iconfont icon-24px"></i>

  字符串模板 动态引入字体图标

<div class="icon-wrap">
     <i :class="`iconfont icon${item.icon}`"></i>
 </div>

3)symbol方式  

    通过symbol和use标签使用,如:

<svg aria-hidden="true">
    <use xlink:href="#icon-sousuo"></use> 
</svg>

二、本地引入方式

 1. 步骤1-2和在线引入方式一致

 2.直接点击如图3所示的  ”下载至本地“ 按钮,下载文件。解压下载好的文件,存放在本地文件夹中

    下载的字体图标文件一般包括以下几个文件,直接复制到项目下即可

3.使用方式和在线引入方式的步骤5、6一致。

4.本地引入,每次添加新图标时,都需要 重复步骤2,下载新的字体图标文件替换旧的字体图标文件(全部替换)

/*

希望对你有帮助!

如有错误,欢迎指正,谢谢!

*/

  • 10
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值