ionic3 应用程序上未显示字体真棒图标答案

【问题标题】：font awesome icons not showing up on ionic3 appionic3 应用程序上未显示字体真棒图标
【发布时间】：2018-09-15 06:13:10
【问题描述】：

我在我的 ionic3 应用程序中实现了很棒的字体图标，但它没有显示出来。我的 ionic 项目环境详情，

cli packages: (C:\Users\acer\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

local packages:

    @ionic/app-scripts : 3.1.8
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.4.0
    npm  : 5.8.0
    OS   : Windows 10

Misc:

    backend : pro

这是我的 intro.html 文件，

<ion-slides pager>
  <ion-slide style="background-color:yellow" >
      <i class="fas fa-utensils" style="font-size:120px;color:#ebebeb" aria-hidden="true"></i>
    </ion-slide>

  </ion-slides>

这是在我的 index.html 文件中

 <!-- font-awesome -->
  <link href="/assets/css/font-awesome.min.css" rek="stylesheet" type="text/html">

我已经添加了以下代码，正如我的 copy.config.js 文件中建议的许多博客文章和 SO 答案

copyFontawesomeFonts: {
    src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyFontawesomeCss: {
    src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
    dest: '{{WWW}}/assets/css'
  },

【问题讨论】：

我用 ionic serve 命令在浏览器上检查了它
查看stackoverflow.com/questions/47617601/…
@Utpaul 我也这样做了，我看到了...后来我放弃了字体真棒图标并添加了离子图标
试试assets/css/font-awesome.min.css。去掉url中的/
要在 ionic 中使用很棒的字体已经在这里回答了，请通过这个 [链接](stackoverflow.com/questions/42747846/font-awesome-with-ionic2/…)

标签： html angular ionic-framework ionic3

【解决方案1】：

链接样式表时出现语法错误

<link href="/assets/css/font-awesome.min.css" rek="stylesheet" type="text/html">

应该是

<link href="/assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">

【讨论】：

你能在网络标签中查看这个文件的状态码吗
如果是 404 则根本没有加载样式表。您也可以使用此链接检查它是否正在加载localhost:3000/assets/css/font-awesome.min.css
检查浏览器中的元素并查看样式是否已更新为 fa

【解决方案2】：

如果您要链接 css 样式表，其类型应始终为

type="text/css"

改成

<!-- font-awesome -->
<link href="/assets/css/font-awesome.min.css" rek="stylesheet" type="text/html">

到

<!-- font-awesome -->
<link href="/assets/css/font-awesome.min.css" rek="stylesheet" type="text/css">

【讨论】：

是的兄弟，我放弃了字体真棒图标并添加了离子图标:( ...感谢您的帮助:) +1
如果我有时间，我会做一个演示并发布一个正确的方法...... :-)

【解决方案3】：

我之前遇到过这个问题。通过从下面的 url 加载 css 文件而不是从资产加载来解决它。

【讨论】：

你指的是哪个网址？