标签: font-awesome-5

我不知道如何将FontAwesome 5包含在Angular 2+应用程序中.我找到了这个包 - https://www.npmjs.com/package/@fortawesome/fontawesome 你能告诉我在哪里可以导入这个包吗？也许在app.module.ts文件中？

当我启用data-search-pseudo-elements时,它会导致在网格中使用图标渲染行的性能降低100倍以上.奇怪的是网格虚拟化了行,所以实际上只有100行可见.没有此设置,渲染时间为.5秒.使用此设置时,它大于30秒,并且经常会崩溃浏览器.有问题的图标不是来自伪元素,但我在index.html中启用了此功能,以便在应用的其他部分进行有针对性的使用.

是否有任何方法可以使用伪类图标而不启用它,或将其范围仅限于某个区域？

我有一个使用FontAwesome图标的Angular 7组件库。

首先，输出ng version：

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.10.7
@angular-devkit/build-angular      0.10.7
@angular-devkit/build-ng-packagr   0.10.7
@angular-devkit/build-optimizer    0.10.7
@angular-devkit/build-webpack      0.10.7
@angular-devkit/core               7.0.7
@angular-devkit/schematics         7.0.7
@angular/cdk                       7.1.1
@angular/cli                       7.0.7
@angular/compiler-cli              7.0.4
@angular/language-service          7.0.4
@angular/material                  7.1.1
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.0.7
@schematics/angular                7.0.7
@schematics/update                 0.10.7
ng-packagr                         4.4.5
rxjs                               6.3.3
typescript                         3.1.3
webpack                            4.19.1

和相关的花絮package.json：

"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/free-regular-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",

这是我的模块定义：

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
import …

我已按照说明使用 angular-fontawesome 5 图标的 svg 图标。请找到以下链接

https://www.npmjs.com/package/@fortawesome/angular-fontawesome

作为第一步

npm i --save @fortawesome/fontawesome-svg-core 
npm i  --save @fortawesome/angular-fontawesome 

如果我正确使用品牌图标

npm i --save @fortawesome/free-brands-svg-icons

第二步：在 app.module.ts 文件中：导入以下内容

import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {fab, faFacebookSquare, faGoogle} from '@fortawesome/free-brands-svg-icons';

第三步：根据primeng文档，我想使用按钮内的品牌图标。

<div class="center-text">
 <p-button icon="fab fa-google" label="Click"></p-button> 
</div>

控制台中没有错误。但是看不到显示中的图标。

作为替代方法：

  <div class="center-text">
  <i class="fab fa-google"></i>
   <p-button label="Click"></p-button>
  </div>

还是没有输出。请帮助如何将品牌图标带入 Primeng 按钮中。

我已经将@fortawesome/angular-fontawesome - 从这里 - https://www.npmjs.com/package/@fortawesome/angular-fontawesome 安装到我的 Angular 7 应用程序中。

我可以使用图标 using 但我找不到通过 CSS 添加它们的方法。

我正在尝试添加这样的 ico CSS 伪元素：

.test:before {
    font-family: "Font Awesome 5 Free";
    content: "\f75b";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
 }

这是行不通的。我看到的只是一个空方块。有人知道如何通过 CSS Pseudo-elements 使用图标吗？

我正在使用 gridview 来显示数据，在 gridview 本身中我有一些操作按钮，如编辑删除和预览图片视图。但我不想在我的预览按钮上显示文本“预览”，我想要（fontawesome 图标）而不是文本（预览）。我的代码在这里......

<asp:GridView ID="GVProduct" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" CssClass="table table-bordered table-sm table-hover table-striped" EmptyDataText="No rows  for the selection criteria." EnableTheming="False" PageSize="5" OnRowCommand="grdForRows_RowCommand" OnPageIndexChanging="grdForRows_PageIndexChanging">
<Columns>
    <asp:BoundField DataField="ProId" HeaderText="Prod.Id">
        <HeaderStyle HorizontalAlign="Left" />
        <ItemStyle HorizontalAlign="Right" />
    </asp:BoundField>
    <asp:BoundField DataField="ProName" HeaderText="Product Name">
        <HeaderStyle HorizontalAlign="Left" />
        <ItemStyle HorizontalAlign="Left" />
    </asp:BoundField>
    <asp:BoundField DataField="ProCategory" HeaderText="Category">
        <HeaderStyle HorizontalAlign="Left" />
        <ItemStyle HorizontalAlign="Left" />
    </asp:BoundField>
    <asp:ButtonField Text="Preview" ButtonType="Button" HeaderText="Photo" CommandName="btnPreview">
        <ControlStyle CssClass="btn btn-success btn-sm" />
    </asp:ButtonField>
    <asp:ButtonField Text="Edit" ButtonType="Button" CommandName="btnEdit">
        <ControlStyle CssClass="btn btn-primary btn-sm" />
    </asp:ButtonField> …

我尝试了下面的代码来使用字体真棒 5 呈现 whatsapp 图标：

<i style="background-color: #25d366; color: white;" class="fab fa-whatsapp "></i>

但它看起来像这样：

我想要的是让它看起来像出现在 Android 手机中的 whatsapp 图标，即没有方形绿色背景。如何实现这一目标？

我有一个有点问题，当谈到绑定到由字体真棒JS生成的字体真棒元素<i>来<svg>。

我正在尝试使用tooltipster将自定义 HTML 元素附加到<i>我的 Laravel 5 应用程序中的标签，如下所示

刀刃

<i class="fa fa-ellipsis-h doc-settings room-image-settings-tooltip" data-tooltip-content="#room_image_settings_{{$key}}" aria-hidden="true"></i>

JS

//Tooltip enable
$('.room-image-settings-tooltip').tooltipster({
    theme: 'tooltipster-punk',
    trigger: 'click',
    animation: 'grow',
    minWidth: 300,
    interactive:true,
    animationDuration:200
});

这导致 Font Awesome 创建这样的 SVG

如您所见，效果很好。它接管了所有属性。问题是，如果没有 font awesome 5，当它保留为<i>元素时绑定得很好，但是当转换为 时<svg>，即使上面的 tooltipster js 位于文档就绪标记内，也必须重新运行 tooltipster 代码在控制台中使其工作并绑定到<svg>.

我的 JS 正在按此顺序加载

应用程序.js

require('@fortawesome/fontawesome-pro/js/all');

$(document).ready(function(){
   //Tooltip enable
   $('.room-image-settings-tooltip').tooltipster({
       theme: 'tooltipster-punk',
       trigger: 'click',
       animation: 'grow',
       minWidth: 300,
       interactive:true,
       animationDuration:200
   });
}); …

我正在尝试以一种非常特殊的方式排列字体真棒动画齿轮（如下图所示）

我创造了一个我似乎能够得到的最接近的小提琴。小提琴在这里https://jsfiddle.net/rke45798/13/

.slow-ani {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}

.fa-small {
  font-size: 84px;
}

.fa-med {
  font-size: 70px;
}

.fa-lge {
  font-size: 48px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" >
<div class="cogs">
  <i class="fas fa-cog fa-small slow-ani"></i>
  <br>
  <i class="fas fa-cog fa-med slow-ani"></i>
  <i class="fas fa-cog fa-lge slow-ani"></i>
</div>

我在上图中显示的安排是否可以实现？如果是这样，是否有任何可以应用的 CSS 技巧？

Angular 版本 8 升级后，Nebular 更新到版本 4。升级后，我看不到之前显示的很棒的字体图标。

我尝试浏览 nebular 的这份文档，它要求我们将 font Awesome 注册为默认包。但即使这样做也不起作用。 https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack。

找不到关于此问题的足够讨论。Font Awesome 已包含在内，并且我已将其添加到我的 angular.json 文件中

constructor(private iconService: NbIconLibraries) {
    this.iconService.registerFontPack('font-aweome');
    this.iconService.setDefaultPack('font-aweome');
}

Nebular 应该接受字体很棒的图标。