首页 > 其他分享 >vue font awasome 的使用

vue font awasome 的使用

时间:2023-11-25 18:04:56浏览次数:46  
标签:vue normal button awasome ztree font open before

font awasome 是一个很经典的图标库。

目前已经更新到了V6版本。

但是从V5开始,这个库就已经闭源收费了。

所以开源库里面最新版本是V4.7。

https://www.npmjs.com/package/font-awesome/v/4.7.0

 

那么怎么使用呢?

main.js

import Vue from 'vue'
import App from './App.vue'

import 'font-awesome/css/font-awesome.min.css';

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

 

原本到这里就可以结束了。

但是因为项目的限制,我们必须用unicode的方式引入。

官网虽然有使用方法,但是并没有写图标对饮的unicode。

这时我们可以直接去找源码。

比如我们想用 fa-minus-square-o 这个图标。

我们就去找源码。

.fa-minus-square-o:before {
  content: "\f147";
}

看到这个content,把content手动引用到我们自己的页面里面。

#c .ztree .button.noline_close:before, 
#c .ztree .button.noline_open:before, 
#c .ztree .button.root_open:before, 
#c .ztree .button.root_close:before, 
#c .ztree .button.roots_open:before, 
#c .ztree .button.roots_close:before, 
#c .ztree .button.bottom_open:before, 
#c .ztree .button.bottom_close:before, 
#c .ztree .button.center_open:before, 
#c .ztree .button.center_close:before {
  content: "\f196";
  position: absolute;
  right: 0px;
  top:3px;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 17px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #999999;
}
#c .ztree .button.noline_open:before, 
#c .ztree .button.root_open:before, 
#c .ztree .button.roots_open:before, 
#c .ztree .button.bottom_open:before, 
#c .ztree .button.center_open:before {
  content: "\f147";
  position: absolute;
  right: 0px;
  top:3px;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 17px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: unset;
  color: #009280;
}

这样就可以了。

标签:vue,normal,button,awasome,ztree,font,open,before
From: https://www.cnblogs.com/foxcharon/p/17855803.html

相关文章

  • vue ztree 的使用
    ztree是一个很经典的基于jquey开发的树结构编辑展示UI组件库。https://gitee.com/zTree/zTree_v3 gitee上有一个很适合vue使用的ztree封装库,https://gitee.com/astinlee_admin/Vue-Giant-Tree/tree/master 但是这个库有个问题。打包后的代码引入到项目中会报错。怎么办......
  • 前端框架vue路由hash模式与history模式的区别
    hash模式会在页面初始化的时候,url后面会带上/#的hash值,后面是路由组件加携带参数,缺点是看起来不太美观,但相比于history模式来说,它具有用户在页面各种点击操作后,点击刷新后数据不丢失,也不会出现网络报错。而history模式优点是能让整个url看起来比较简洁美观,但问题就是项目部署上线......
  • Vue
    vue官网:https://cn.vuejs.org/一、Vue概述1.Vue简介 Vue是一个渐进式(真正用到才引用)的JavaScript框架与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,与现代化的工具以及各种支持......
  • Vue element 关于下拉框输入模糊查询
    最近又一个新的需求,在输入框实现输入框下拉模糊查询开始对elementui还不熟悉,不知道怎么用,不过通过网上查阅资料发现使用<el-col:span="12"><el-autocompletev-model="form.name"......
  • Vue2纯前端导出
    //导出exportExcel(){//构造数据constdata=[['姓名','手机号码','卡号','身份等级'],...this.list.map((item)=>[item.clientName,item.clientPhone,item.card,item.standing]),]l......
  • Vue3实现九宫格抽奖效果
    需求与效果需求:1、礼品根据后台配置生成2、跑马灯转动效果3、结果后台生成并且每个礼物概率不一样(概率这里不讨论)注意点:1、布局如何排列,是按照跑动排列还是从左至右自上而下排列2、点击按钮如何插入,DOM结构如何生成3、跑马效果如何实现,速度如何控制4、接口如何处理,包括接......
  • Vue3实现转盘抽奖效果
    1、实现转盘数据动态配置(可通过接口获取)2、背景色通过分隔配置3、转动速度慢慢减速,最后停留在每一项的中间,下一次开始从本次开始4、当动画停止后在对应事件中自定义生成中奖提示。5、本次中奖概率随机生成,也可自定义配置实现代码html<template><divclass="graph-page">......
  • 遇到了vue3 刷新问题
     index.d762f427.js:3[Vuewarn]:Unhandlederrorduringexecutionofschedulerflush.ThisislikelyaVueinternalsbug.Pleaseopenanissueathttps://new-issue.vuejs.org/?repo=vuejs/coreat<Tags>at<HomeonVnodeUnmounted=fn<onVnodeU......
  • 若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面(新路由),面包屑和标签页
    若依vue前端动态设置路由path不同参数在页面容器里打开新页面(新路由),面包屑和标签页标题根据参数动态改变,面包屑多级标题,侧边栏对应菜单亮起:https://blog.csdn.net/weixin_43991241/article/details/126319259?ops_request_misc=&request_id=&biz_id=102&utm_term=matched.redir......
  • 基于springboot,vue的教务管理系统源码 学生信息管理系统
    项目源码获取方式放在文章末尾处项目技术数据库:Mysql5.7数据表:9张开发语言:Java(jdk1.8)开发工具:idea前端技术:Vue后端技术:SpringBoot 项目源码获取方式放在文章末尾处功能简介该项目是一个教务管理系统,角色分为管理员,教师,学生三个角色,具体功能菜单如下:管理员端    登录    ......