vue.js系列中的vue-fontawesome使用
折腾前言目前工作主要使用 vue.js 框架进行开发,自己又对 vue 不是那么了解,还是半桶的状态,所以得加紧步伐赶紧熟悉起来,这两天在使用脚手架 废话不多说,开搞! 准备工作这个是作者的 github 地址: 为了演示完整步骤,用脚手架新建个项目 正在创建中… 趁此闲话几句 这种方式使用有个好处就是,你可以自己自定义任何图标,即用 svg 格式输出,然后通过 如果图标很多的时候,DOM 中可能分散着大量的 svg 标签,这个不知道算不算缺点来着。 chevron-right 这个是该图标的名字,在使用的时候通过
paths 里面就是图标的绘制 svg 时候的路径信息 安装OK了,进入正题…… 准备工作:
这个简单安装完成就OK。 结果预览从图中看其实图标最后就是个 svg 标签 图标存放目录为了开发方便,新建 src/icons 目录集中存放图标js文件 这里 cmod 是 777 权限,由于是用的是虚拟机,所以经常出现权限问题,因此索性直接给 777(仅限本地开发) icon 组件下载 Icon.vue 文件 到下载 Icon.vue 文件,建议将整个项目 git 下来。 这个组件的作用就是,用来创建 然后把 Icon.vue 放到 components 目录下(放哪里可以自己决定) 在 src/icons 创建注册图标文件这个目录集中放置所有 icon 的注册 js 文件 创建出口文件 index.js 这里面将引入所有图标 js 文件 以右键头图标为例:(chevron-right.js) 项目入口 main.js 引用字体库项目主入口文件 main.js 中引入 引入图标组件 引入图标内容文件 然后将 Icon 注册成 vue 组件 注册完成之后,我们就可以在代码中直接使用 结束使用步骤还是很简单的,经过上面的步骤之后我们就可以正常使用图标库了 总结下来步骤其实就下面几步
PS: 直接设置字体,改变不了大小; 总结以上所述是小编给大家介绍的vue.js系列中的vue-fontawesome使用。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |