Ionic 2：向 Ionic 2 项目添加图标字体答案

【问题标题】：Ionic 2 : Add a icons font to an Ionic 2 projectIonic 2：向 Ionic 2 项目添加图标字体
【发布时间】：2017-08-30 15:31:11
【问题描述】：

我想为我的项目 Ionic 2 添加一个特定的图标字体。我只有一个包含我的字体的文件夹，但我不知道如何将它集成到项目中。

我尝试添加 webfont 医疗图标： https://samcome.github.io/webfont-medical-icons/

我试图将它添加到我的 www/assets/fonts 文件夹中，但我不知道必须更新女巫文件才能使用此字体？

更新

我的项目已经有了很棒的字体。我尝试遵循相同的过程：

我通过了 www/assets/fonts 文件夹中的 4 种字体文件。

我在 www/assets/cass 文件夹中添加了一个文件“wfmi-style.min.css”。

最后我把它写在我的 src/index.html 文件中：

<link href="assets/css/font-awesome.min.css" rel="stylesheet">
  <link href="assets/css/wfmi-style.min.css" rel="stylesheet">
  <link href="build/main.css" rel="stylesheet">

但我有这个错误：

Failed to decode downloaded font: http://localhost:8100/assets/fonts/webfont-medical-icons.ttf
(index):1 Failed to decode downloaded font:
http://localhost:8100/assets/fonts/webfont-medical-icons.woff

我的 wfmi-style.min.css 开头有代码：

@font-face {
  font-family: 'webfont-medical-icons';
  src:url('../fonts/webfont-medical-icons.eot');
  src:url('../fonts/webfont-medical-icons.eot?#iefix') format('embedded-opentype'),
      url('../fonts/webfont-medical-icons.ttf') format('truetype'),
      url('../fonts/webfont-medical-icons.woff') format('woff'),
      url('../fonts/webfont-medical-icons.svg#webfont-medical-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

【问题讨论】：

标签： css angular fonts ionic2

【解决方案1】：

这就是你要找的Using font-awesome in ionic 2

下载 font-awesome 库。
在 src/assets 中创建“fonts”文件夹并从 font-awesome/fonts 文件夹中复制字体
复制scss文件夹，粘贴到src/theme/scss下
打开 variables.scss 文件，复制以下代码

@import "scss/font-awesome"; @font-face { font-family: 'FontAwesome'; src: url('../assets/fonts/fontawesome-webfont.eot?v=#{$fa-version}'); src: url('../assets/fonts/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') 格式('embedded-opentype'), url('../assets/fonts/fontawesome-webfont.woff2?v=#{$fa-version}') 格式('woff2'), url('../assets/fonts/fontawesome-webfont.woff?v=#{$fa-version}') 格式('woff'), url('../assets/fonts/fontawesome-webfont.ttf?v=#{$fa-version}') 格式('truetype'), url('../assets/fonts/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') 格式('svg');字体粗细：正常；字体样式：正常； }

在 HTML 中包含您的图标

<i primary class="fa fa-cart-plus fa-lg"></i>

更多请点击链接 .

【讨论】：

【解决方案2】：

你可以在包含 fontawesome 之后使用<ion-icon class="fa fa-iconname"></ion-icon>。

【讨论】：