vue.js客服系统实时聊天项目开发(四)引入iconfont图标代码
2023-06-13 09:16:43 时间
普通引入模式下是这样的
首先,您需要在iconfont.cn上创建一个账号并添加图标。
然后,将iconfont的链接代码加入到页面的head标签中,例如:
<link rel="stylesheet" href="//at.alicdn.com/t/font_123456_abcdefghijklmno.css">
最后,使用以下方式在页面中使用图标:
<i class="iconfont"></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)时,使用图标按钮
相关文章
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- vue源码实现的整体流程解析「建议收藏」
- vue md5.js_VUE.js
- vue JS 对象转数组[通俗易懂]
- vue源码分析-从new Vue开始
- Vue Admin Work 系列框架又添新成员啦~
- Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串
- jQuery和Vue的区别[通俗易懂]
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- vue如何引入js文件_vue中引入外部js好麻烦
- vue如何引用js文件_html转化为vue组件
- VUE组件封装_vue组件内部双向绑定
- vue中如何引入js文件_vue调用外部js方法
- js 数组去除重复数据-Vue.js开发移动端经验总结
- vue.js客服系统实时聊天项目开发(三)实现对话框聊天界面
- 在vue cli3.0 里面下载less,下载成功了还是提示没有 需要下载
- vue.js客服系统实时聊天项目开发(八)使用axios post请求访客初始化接口
- vue.js客服系统实时聊天项目开发(十三)日期缩短展示,同一天只展示时秒,同一年展示月日小时秒
- 我的Vue.js生态开源之旅
- vue.js客服系统实时聊天项目开发(十七)解决url get传参后进行base64解密问题
- vue.js入门篇之Vue.js 样式绑定
- Vue.js 中异常高效可用的 .sync 修饰符
- Vue.js学习笔记
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- Vue.js与Oracle数据库——构建完美的前端应用(vueoracle)
- 创建JS文件:在Linux下实现自动化任务(linux创建js文件)
- Vue实时监测Redis变化(vue监控redis变化)
- Oracle中JS的优势让数据库性能提升(oracle中 js)
- 研究Oracle VUE价格探究深入探究和分析(oracle vue价格)
- CSS和JS标签style属性对照表(方便js开发的朋友)