分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

在vuejs 中使用Font Awesome字体图标

发布时间:2023-09-06 01:48责任编辑:彭小芳关键词:jsvuejs

安装

npm install vue-awesome

引入

import Vue from ‘vue‘/* 在下面两种方式中任选一种 */// 仅引入用到的图标以减小打包体积import ‘vue-awesome/icons/flag‘// 或者在不关心打包体积时一次引入全部图标import ‘vue-awesome/icons‘/* 任选一种注册组件的方式 */import Icon from ‘vue-awesome/components/Icon‘// 全局注册(在 `main .js` 文件中)Vue.component(‘icon‘, Icon)// 或局部注册(在组件文件中)export default { ?components: { ???Icon ?}}

使用方法

<!-- 基础用法 --><icon name="beer"></icon><!-- 添加选项 --><icon name="sync" scale="2" spin></icon><icon name="comment" flip="horizontal"></icon><icon name="code-branch" label="Forked Repository"></icon><!-- 堆叠图标 --><icon label="No Photos"> ?<icon name="camera"></icon> ?<icon name="ban" scale="2" class="alert"></icon></icon>

旋转动画

<icon name="spinner" spin></icon><icon name="spinner" pulse></icon>

其他图标

请访问 Font Awesome 官网以查询可以使用的 name 值,如 beerfilecamera 等。

在vuejs 中使用Font Awesome字体图标

原文地址:https://www.cnblogs.com/yinian/p/8780103.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved