Question

我已经安装了Font Awesome，但是在我的ReactJs项目中我仍然无法在Boostrap上使用它。

我已按照以下步骤进行安装：

#include <stdio.h> #include <stdlib.h> // Datentyp fuer die Knoten der verketteten Liste. Die Listenelemente sind // Zahlen. Ein Knoten besteht aus einer Zahl und aus einem Zeiger. struct node { int number; struct node *next; }; // Funktionsprototyp zum Hinzufuegen einer neuen Zahl in die Liste. // Die Zahl wird am Listenkopf hinzugefuegt. // Erhaelt die Zahl und den aktuellen Listenkopf als Parameter, liefert // den neuen Listenkopf zurueck struct node *insert_at_head(int x, struct node *list); // Funktionsprototyp zum Anzeigen der Listenelemente. Erhaelt den Listenkopf // als Parameter, hat keinen Rueckgabewert (void) void display_list(struct node *list); // Funktionsprototyp zum Addieren der Zahlen in der Liste. Erhaelt den // Listenkopf, liefert die Summe der Zahlen in der Liste zurueck. Liefert 0 // zurueck fuer die leere Liste. Den Funktionsrumpf weiter unten ergaenzen! int sum_up_elements(struct node *list); // Funktionsprototyp zum Hinzufuegen einer neuen Zahl in die Liste. // Die Zahl wird am Listenende hinzugefuegt. // Erhaelt die Zahl und den aktuellen Listenkopf als Parameter, liefert // den neuen Listenkopf zurueck. Den Funktionsrumpf weiter unten ergaenzen! struct node *insert_at_tail(int x, struct node *list); int main() { // my_list ist ein Zeiger auf struct node. Urspruenglich NULL, Liste ist leer struct node *my_list = NULL; my_list = insert_at_head(10, my_list); // Die Zahl 3 in die Liste hinzufuegen. Den zurueckgelieferten Zeiger // der my_list zuweisen, d.h., my_list zeigt danach zum Knoten mit der Zahl // "3". my_list = insert_at_head(3, my_list); // Noch ein paar weitere Zahlen einfuegen my_list = insert_at_head(15, my_list); // Jetzt ist 15 am Listenkopf! my_list = insert_at_head(-4, my_list); // Jetzt ist -4 am Listenkopf! my_list = insert_at_head(99, my_list); // Jetzt ist 99 am Listenkopf! // Die Listenelemente anzeigen display_list(my_list); printf("Sum of the numbers: %d\n",sum_up_elements(my_list)); printf("%d\n",insert_at_tail(20,my_list)); return(0); } // Implementierung der Funktion insert_at_head struct node *insert_at_head(int x, struct node *z) { struct node *new_node = malloc(sizeof(struct node)); if (new_node == NULL) { printf("Fehler bei der Speicherallokation\n"); return(NULL); } // Die Zahl x in den neuen Knoten speichern new_node->number = x; // Verweis zum naechsten Knoten, naemlich zum aktuellen Listenkopf new_node->next = z; // Zeiger zum neuen Knoten zurueckgeben return(new_node); } // Implementierung der Funktion display_list void display_list(struct node *z) { while (z != NULL) { printf("%d ", z->number); z = z->next; } printf("\n"); } int sum_up_elements(struct node *z) { int sum=0; for(; z->next !=NULL;z=z->next){ sum +=z->number; } return(sum); } struct node *insert_at_tail(int x, struct node *list) { struct node *new_node = malloc(sizeof(struct node)); if (new_node == NULL) { printf("Fehler bei der Speicherallokation\n"); return(NULL); } for(;list->next!=NULL;list=list->next){ } new_node->number=x; new_node->next=NULL; if(list==NULL) return(new_node); struct node *new_head=list; return(new_head); }

然后将其导入到我的index.js文件中，例如：

npm install --save font-awesome

Webpack.config.js 看起来像这样：

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

Package.json

module: {
        rules: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader", 
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.svg$/,
                use: [
                  "babel-loader",
                  {
                    loader: "react-svg-loader",
                    options: {
                      svgo: {
                        plugins: [
                          { removeTitle: false }
                        ],
                        floatPrecision: 2
                      }
                    }
                  }
                ]
            },
            {
                test: /\.(scss|sass)$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            },

            { 
                test: /\.css$/, 
                loader: 'style-loader!css-loader' 
            },
            {
                test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
                loader: "url-loader",
                query: { mimetype: "image/png" }
            },

            {
                test: /\.html$/,
                loader: 'html-loader?attrs[]=video:src'
              }, {
                test: /\.mp4$/,
                loader: 'url-loader?limit=10000&mimetype=video/mp4'
            }

        ]

    }

当我尝试像这样使用它

"dependencies": {
"font-awesome": "^4.7.0"
...}

这是不可能的，因为当我运行<i className="fas fa-user"></i>时，在终端上出现以下错误：

npm start

我已经在线阅读了一些解决方案，并且尝试了一种安装Font Awesome的解决方案，例如：

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
Module build failed: 
 @ ./node_modules/css-loader!./node_modules/font-awesome/css/font-awesome.min.css 7:707-758
 @ ./node_modules/font-awesome/css/font-awesome.min.css
 @ ./src/app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/app/index.js

导入：

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

使用：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';

这行得通，但是我如何才能像使用Boostrap的这行代码一样正常工作：

<FontAwesomeIcon icon={ faThumbsUp }/>

Answer 1

您已将Webpack配置为使用以下正则表达式providers: [], bootstrap: [AppComponent], entryComponents: [ LoginComponent ]解析svg，这意味着不会解析svg之后的任何文件。如果您发现错误，则该文件显示为/\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/，肯定与您的正则表达式不符

将正则表达式更改为./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0，它应该可以工作

/.(png|jpg|gif|woff|woff2|eot|ttf|svg)(\?[\=\.a-z0-9]+)?$/

Answer 2

我终于找到了对我有用的解决方案。我纠正了几件事。

1。 webpack.config.js

我在webpack.config中做了几处更改，我更改了这两件事。

1。要更改的地方

旧的无效示例：

{
  test: /\.svg$/,
  use: [
    "babel-loader",
    {
      loader: "react-svg-loader",
      options: {
        svgo: {
          plugins: [{
            removeTitle: false
          }],
          floatPrecision: 2
        }
      }
    }
  ]
},

新的工作示例：

{
  test: /\.svg$/,
  use: [
    "babel-loader",
    {
      loader: "url-loader",
      options: {
        prefix: "font",
        limit: 10000,
        mimetype: "application/octet-stream",
        svgo: {
          plugins: [{
            removeTitle: false
          }],
          floatPrecision: 2
        }
      }
    }
  ]
},

有变化的地方

添加此装载程序：

{test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }

在我的webpack.config.js中进行更改后，我的终端没有任何错误，但是图标仍然显示为带边框的方框。因此，在我的html部分中，我做了以下修复：

当真棒字体的新版本（5）使用"fas"或"fab"而不是"fa"前缀时，我注意到我已经在使用"fas"而不是{{1 }}，所以我再次切换到"fa"，它可以正常工作。

这些步骤帮助我开始在ReactJs项目中使用Font Awesome。

无法在ReactJs项目中使用Font Awsome

2 个答案: