zoukankan      html  css  js  c++  java
  • 在vuejs 中使用Font Awesome字体图标

    安装

    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>

    动态尺寸

    可以添加以下 CSS 代码来让图标根据当前的 font-size 动态调整尺寸:

    .fa-icon {
       auto;
      height: 1em; /* 或任意其它字体大小相对值 */
      /* 要在 Safari 中正常工作,需要再引入如下两行代码 */
      max- 100%;
      max-height: 100%;
    }

    其他图标

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

    我自横刀向天笑,哈哈哈哈哈哈哈!
  • 相关阅读:
    2020年下半年学习进度04
    2020年下半年学习进度03
    2020年下半年学习进度02
    2020年下半年学习进度01
    数据爬取
    个人课程总结
    Syncnavigator V8.6.2在线说明书
    SyncNavigator V8.6.2企业版下载链接
    Syncnavigator V8.6.2帮助文档(说明书)下载
    SQL Server 自动同步到 MySQL
  • 原文地址:https://www.cnblogs.com/yinian/p/8780103.html
Copyright © 2011-2022 走看看