Ionic 2：爲Ionic 2項目添加一個圖標字體

我想添加一個特定的圖標字體到我的項目Ionic 2.我只是有一個文件夾與我的字體，但我不知道如何將它集成到項目。Ionic 2：爲Ionic 2項目添加一個圖標字體

我嘗試添加web字體醫療圖標： https://samcome.github.io/webfont-medical-icons/

我試着將它添加在我的WWW /資產/ fonts文件夾中，但我不知道巫文件我已經更新到使用這個字體？

UPDATE

我已經有字體真棒到我的項目。我試圖按照相同的過程：

我通過我的www/assets/fonts文件夾中的4個字體文件。

我通過我的www/assets/cass文件夾中的文件「wfmi-style.min.css」。

Finaly我寫這在我的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式開始時的代碼。 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; 
}

來源

2017-08-29 V. Pivet

這裏是你在找什麼Using font-awesome in ionic 2

下載字體真棒庫。
創建的src /資產「字體」文件夾，從字體真棒/字體複製字體文件夾
複製SCSS文件夾並將其粘貼在src /主題/ 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}'）format（'embedded-opentype'）， url（'../ assets /fonts/fontawesome-webfont.woff2?v=#{$fa-version}'）format（'woff2'）， url（'../ assets/fonts/fontawesome-webfont.woff？v =＃{$ fa （'../ assets/fonts/fontawesome-webfont.ttf？v =＃{$ fa-version}'）格式（'truetype'）， url（'woff'）， url '../assets/fonts/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular'）format（'svg'）; font-weight：normal; font-style：normal; }

要包括在HTML

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

你的圖標更跟隨鏈接。

來源

2017-08-29 18:27:58

感謝您的回答。我更新了我的帖子。 –

你可以在fontawesome收錄後使用<ion-icon class="fa fa-iconname"></ion-icon>。

來源

2017-08-30 03:21:41

Ionic 2：爲Ionic 2項目添加一個圖標字體

回答

相關問題