• 技术文章 >web前端 >js教程

    浅谈Angular中如何添加和使用Font Awesome

    青灯夜游青灯夜游2021-07-19 10:46:02转载111
    本篇文章给大家介绍一下什么是Font Awesome,以及Angular项目中添加Font Awesome,使用Font Awesome图标库的方法,希望对大家有所助。

    在这篇文章中,我们将研究如何在Angular应用程序中使用Font Awesome,以及如何使用Font Awesome的图标动画和样式设计。【相关教程推荐:《angular教程》】

    在我们进一步讨论之前,让我们先谈谈Font Awesome是什么。

    Font Awesome

    Font Awesome是一个图标工具包,有1500多个免费图标,使用起来非常方便。这些图标是使用可扩展的矢量创建的,并且在应用到它们时继承了CSS的尺寸和颜色。这使得它们成为高质量的图标,在任何屏幕尺寸上都能很好地工作。

    在Angular 5发布之前,开发者必须安装Font Awesome包,并在Angular项目中引用其CSS才能使用。

    但是Angular 5的发布,通过为Font Awesome创建Angular组件,使得在我们的项目中实现Font Awesome变得容易了。有了这个功能,Font Awesome可以干净利落地集成到我们的项目中。

    由于Font Awesome图标的可伸缩性,它能很好地与文本内联融合。在这篇文章中,我们将进一步探讨如何为Font Awesome图标使用动画、着色和尺寸。

    创建一个演示的Angular应用程序

    让我们为本教程创建一个演示的Angular应用程序。打开你的终端,CD到项目目录,并运行下面的命令。

    在你运行该命令之前,确保你的系统已经安装了Node.js,同时也安装了Angular CLI

    ng new angular-fontawesome复制代码

    安装Font Awesome依赖项

    对于那些已有项目的人,我们可以从这里开始跟进。上面的命令完成后,CD到项目目录,安装下面的Font Awesome图标命令。

    npm install @fortawesome/angular-fontawesome
    npm install @fortawesome/fontawesome-svg-core
    npm install @fortawesome/free-brands-svg-icons
    npm install @fortawesome/free-regular-svg-icons
    npm install @fortawesome/free-solid-svg-icons
    
    # or
    
    yarn add @fortawesome/angular-fontawesome
    yarn add @fortawesome/fontawesome-svg-core
    yarn add @fortawesome/free-brands-svg-icons
    yarn add @fortawesome/free-regular-svg-icons
    yarn add @fortawesome/free-solid-svg-icons

    在Angular应用程序中使用Font Awesome图标

    在Angular项目中使用Font Awesome有两个步骤。我们来看看这两点。

    1. 如何在组件层面上使用Font Awesome图标
    2. 如何使用Font Awesome图标库

    如何在组件层面上使用Font Awesome图标

    这一步与在组件级使用Font Awesome图标有关,这不是一个好的方法,因为它涉及到我们将图标导入到每个需要图标的组件中,而且还要多次导入相同的图标。

    我们还是要看看如何在一个组件中使用图标,以备我们在构建一个应用程序时需要我们在一个组件中使用图标。

    安装完Font Awesome后,打开app.module.ts ,导入FontAwesomeModule ,就像下面这样。

    import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
    imports: [
        BrowserModule,
        AppRoutingModule,
        FontAwesomeModule
      ],

    之后,打开app.component.ts ,导入你想使用的图标名称。比方说,我们想利用faCoffee

    import { faCoffee } from '@fortawesome/free-solid-svg-icons';复制代码

    接下来,我们创建一个名为faCoffee 的变量,并将我们导入的图标分配给该变量,这样就可以在app.component.html 中使用它。如果我们不这样做,我们就不能使用它。

    faCoffee = faCoffee;

    现在,在app.component.html ,写下下面的代码。

    <div>
        <fa-icon [icon]="faCoffee"></fa-icon>
    </div>

    运行该命令,为我们的应用程序提供服务,并检查我们的图标是否显示。

    ng serve

    如果我们看一下我们的网页,我们会看到faCoffee 显示在屏幕上。这表明图标已经安装并成功导入。

    如何使用Font Awesome图标库

    这是我们在应用程序中使用Font Awesome的最佳方法,特别是当我们想在所有组件中使用它,而不需要重新导入图标或多次导入一个图标时。让我们来看看我们如何实现这个目标。

    打开app.module.ts ,写下下面的代码。

    import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
    import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
    import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons';
    
    export class AppModule { 
      constructor(library: FaIconLibrary) {
        library.addIcons(fasStar, farStar);
      }
    }

    之后,我们可以直接在app.component.html 里面使用它,而不需要在使用它之前声明一个变量并把它传给那个变量。

    <div>
        <fa-icon [icon]="['fas', 'star']"></fa-icon>
        <fa-icon [icon]="['far', 'star']"></fa-icon>
    </div>

    如果我们现在加载网页,我们将看到星星图标被显示出来。

    Font Awesome中的图标样式

    Font Awesome有四种不同的风格,我们来看看免费的图标--除去Pro light图标,它使用前缀'fal' ,并有专业许可证。

    接下来,让我们看看我们还能用Font Awesome图标做什么。

    不用写CSS样式就能改变图标的颜色和大小

    让我们来看看我们如何在Angular中不写CSS样式就能改变Font Awesome图标的颜色。

    这种方法有助于我们在组件层面上使用图标。然而,当在所有的组件中使用这种方法时,它是没有帮助的,因为它将改变我们项目中所有组件的图标颜色。对于多个组件,我们可以只用一个CSS类或样式属性来改变它一次。

    但是,当我们在一个组件层面上工作时,我们可以使用它,因为我们将只在该组件中使用该图标,而不是为它创建一个CSS属性并在CSS文件中设置样式。因此,让我们看看我们如何在Angular项目中做到这一点。默认情况下,下面的图标是black ,我们想把它改成red

    // from black
    <fa-icon [icon]="['fab', 'angular']" ></fa-icon>
    
    // to red
    <fa-icon
          [icon]="['fab', 'angular']"
          [styles]="{ stroke: 'red', color: 'red' }"
    ></fa-icon>

    当使用内联造型改变图标颜色和笔画时,我们必须利用fa-icon 属性。

    接下来,我们要在Angular中使用内联样式将图标的大小从小到大。要做到这一点,我们必须使用size 属性的fa-icon

        <fa-icon
          [icon]="['fab', 'angular']"
          [styles]="{ stroke: 'red', color: 'red' }"
          size="xs"
        ></fa-icon>
    
        <fa-icon
          [icon]="['fab', 'angular']"
          [styles]="{ stroke: 'red', color: 'red' }"
          size="sm"
        ></fa-icon>
    
        <fa-icon
          [icon]="['fab', 'angular']"
          [styles]="{ stroke: 'red', color: 'red' }"
          size="lg"
        ></fa-icon>
    
        <fa-icon
          [icon]="['fab', 'angular']"
          [styles]="{ stroke: 'red', color: 'red' }"
          size="5x"
        ></fa-icon>
    
        <fa-icon
          [icon]="['fab', 'angular']"
          [styles]="{ stroke: 'red', color: 'red' }"
          size="10x"
        ></fa-icon>

    默认情况下,Font Awesome图标会继承父容器的大小。它允许它们与我们可能使用的任何文本相匹配,但如果我们不喜欢默认的尺寸,我们必须给它们我们想要的尺寸。

    我们使用xs,sm,lg,5x, 和10x 等类。这些类将图标的大小增加和减少到我们想要的程度。

    动画化Font Awesome图标

    让我们也来看看我们如何在不使用Angular中的CSS或动画库的情况下对Font Awesome图标进行动画。

    作为一个开发者,当用户点击一个提交按钮或页面正在加载时,我们可能想显示一个加载器或旋转器的效果,告诉用户有东西正在加载。

    我们可以使用Font Awesome图标来达到这个目的。我们不需要导入一个外部的CSS动画库,而只需要在图标标签上添加Font Awesomespin 属性。

    这样做可以避免我们下载一个完整的CSS动画库,而最终使用一个旋转的效果或使用关键帧编写一个长的CSS动画。

    因此,让我们来看看我们如何通过使用React图标来实现这一点。

    <fa-icon
          [icon]="['fab', 'react']"
          [styles]="{ stroke: 'blue', color: 'blue' }"
          size="10x"
    ></fa-icon>

    我们刚刚导入了React图标,现在我们要对它进行动画处理。在React图标组件上,添加Font Awesomespin loader属性。

    <fa-icon
          [icon]="['fab', 'react']"
          [styles]="{ stroke: 'blue', color: 'rgb(0, 11, 114)' }"
          size="10x"
          [spin]="true"
    ></fa-icon>

    当我们加载网页时,我们会看到React图标在无限地旋转。这是因为我们把spin 属性设置为true

    总结

    在这篇文章中,我们能够看到如何在Angular项目中使用Font Awesome图标,如何添加图标库中的一些基本样式,以及如何对图标进行动画处理。

    我们还可以用Font Awesome图标做更多的事情,比如固定宽度图标旋转图标Power Transforms和组合两个图标。Font Awesome的教程可以教你更多关于如何在你的项目中使用这些工具。

    如果你觉得这篇文章有帮助,请与你的朋友分享。

    英文原文地址:https://blog.logrocket.com/how-to-add-font-awesome-angular-project/

    更多编程相关知识,请访问:编程视频!!

    以上就是浅谈Angular中如何添加和使用Font Awesome的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:LogRocket Blog,如有侵犯,请联系admin@php.cn删除
    专题推荐:Angular Font Awesome
    上一篇:聊聊Node.js中JSON格式和Excel格式的双向转换 下一篇:javascript有哪些主要框架
    VIP会员

    相关文章推荐

    • 浅析Angular路由中的懒加载、守卫、动态参数• 浅谈Angular如何使用ng-content进行内容投影• 浅谈Angular中组件样式的工作原理• 浅谈Angular中RxJS如何映射数据操作• 如何利用管道提高Angular应用程序的性能?• 浅谈一下Angular模板引擎ng-template

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网