Question

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

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

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

更新

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

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

我通过了一个文件＆＃34; wfmi-style.min.css＆＃34;在我的www / assets / cass文件夹中。

最后我在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;
}

Answer 1

以下是您要找的Using font-awesome in ionic 2

下载font-awesome库。
创建＆＃34;字体＆＃34; src / assets中的文件夹，并从font-awesome / fonts文件夹中复制字体
复制scss文件夹并将其粘贴到src / theme / scss
打开variables.scss文件，然后复制以下代码

@import＆＃34; scss / font-awesome＆＃34 ;; @ font-face {font-family：＆＃39; FontAwesome＆＃39 ;; src：url（＆＃39; ../ assets / fonts / fontawesome-webfont.eot？v =＃{$ fa-version}＆＃39;）; src：url（＆＃39; ../ assets / fonts / fontawesome-webfont.eot？#iefix＆amp; v =＃{$ fa-version}＆＃39;）格式（＆＃39; embedded-opentype＆＃39; ） url（＆＃39; ../ assets / fonts / fontawesome-webfont.woff2？v =＃{$ fa-version}＆＃39;）格式（＆＃39; woff2＆＃39;）， url（＆＃39; ../ assets / fonts / fontawesome-webfont.woff？v =＃{$ fa-version}＆＃39;）格式（＆＃39; woff＆＃39;）， url（＆＃39; ../ assets / fonts / fontawesome-webfont.ttf？v =＃{$ fa-version}＆＃39;）格式（＆＃39; truetype＆＃39;）， url（＆＃39; ../ assets / fonts / fontawesome-webfont.svg？v =＃{$ fa-version}＃fontawesomeregular＆＃39;）格式（＆＃39; svg＆＃39;）; font-weight：normal; font-style：normal; }

将您的图标包含在HTML

中

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

了解更多信息请点击链接

Answer 2

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

Ionic 2：为Ionic 2项目添加图标字体

2 个答案: