简体   繁体   English

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

[英]font awesome icons not showing up on ionic3 app

I have implemented font awesome icons in my ionic3 app, but it does not show up. 我已经在ionic3应用程序中实现了字体真棒图标,但是没有显示出来。 My ionic project environment details, 我的离子项目环境详细信息,

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

this is my intro.html file, 这是我的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>

this is in my index.html file 这是在我的index.html文件中

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

I have already added following code, as many blog posts and SO answers suggested in my copy.config.js file 我已经添加了以下代码,在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'
  },

You have syntax error in linking stylesheet 链接样式表时出现语法错误

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

It should be 它应该是

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

If you are linking a css-stylesheet its type should always be 如果您要链接CSS样式表,则其类型应始终为

type="text/css"

Change it from 更改为

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

to

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

I have faced this issue earlier. 我之前已经遇到过这个问题。 Resolved it by loading css file from below url instead of loading from assets. 通过从url以下加载css文件而不是从资产加载来解决此问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM