关于前端:网站客服系统在线客服系统源码vuejs项目开发四引入iconfont图标代码

3次阅读

共计 514 个字符,预计需要花费 2 分钟才能阅读完成。

一般引入模式下是这样的

首先,您须要在 iconfont.cn 上创立一个账号并增加图标。

而后,将 iconfont 的链接代码退出到页面的 head 标签中,例如:

<link rel="stylesheet" href="//at.alicdn.com/t/font_123456_abcdefghijklmno.css">

最初,应用以下形式在页面中应用图标:
<i class="iconfont">&#xe600;</i>

其中,”iconfont” 是必须的,“” 是你所选的图标的编码。

留神:每个图标的编码是不同的,请替换为您本人的图标编码。

选好图标当前,点击下载代码

在 vuejs 我的项目外面须要把代码放入 assets 目录下,新建了 icon 目录放进去

main.js 外面引入 import ‘@/assets/icon/iconfont.css’ 代码里应用 class

                <div class="iconfont icon-jiahao"></div>
                <div class="iconfont icon-fasong"></div>

能够在 iconfont 会员中心看到 class

  实现的成果如图,在开发惟一在线客服(gofly.v1kf.com)时,应用图标按钮

 

正文完
 0