Як користуватися чудовими значками шрифту з вузлових модулів


111

Я встановив чудові шрифти 4.0.3 іконки за допомогою npm install.

Якщо мені потрібно використовувати його з вузлових модулів, як мені використовувати його в html-файлі?

Якщо мені потрібно редагувати файл менше, чи потрібно мені редагувати його у вузлових модулях?


Ви коли-небудь придумували "правильний" спосіб це зробити? Наразі я просто використовую завдання gulp, щоб скопіювати речі з node_modules у свій публічний каталог.
sjmeverett

Пізніше я використовував його як компонент підсилювача ...
Гован,

Відповіді:


106

Встановити як npm install font-awesome --save-dev

У файлі, що має меншу розробку, ви можете або імпортувати весь шрифт дивовижно менше @import "node_modules/font-awesome/less/font-awesome.less", або заглянути в цей файл та імпортувати лише ті компоненти, які вам потрібні. Я думаю, що це мінімальний рівень основних значків:

/* adjust path as needed */
@fa_path: "../node_modules/font-awesome/less";
@import "@{fa_path}/variables.less";
@import "@{fa_path}/mixins.less";
@import "@{fa_path}/path.less";
@import "@{fa_path}/core.less";
@import "@{fa_path}/icons.less";

Як на замітку, ви все ще не збираєтеся зберігати стільки байтів, роблячи це. У будь-якому випадку, ви збираєтеся в кінцевому підсумку включати між 2-3k рядків не зміненого CSS.

Вам також потрібно буде обслуговувати самі шрифти з папки, яка називається /fonts/у вашому загальнодоступному каталозі. Ви можете просто скопіювати їх туди, використовуючи просту задачу із глоткою, наприклад:

gulp.task('fonts', function() {
  return gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest('public/fonts'))
})

9
Слід більше підкреслити, що шрифти також потрібно подавати до папки шрифтів ... Я, мабуть, витратив годину, намагаючись з'ясувати цю просту дрібницю.
Alex J

3
Ви також можете адаптувати шлях статики шрифту, встановивши змінну fa-font-pathв потрібне місце.
zusatzstoff

У наведеному вище прикладі вам потрібно слідкувати за вашим меншим імпортом із наступним переосмисленням, щоб після розгортання були знайдені дивовижні шрифтові файли, скопійовані gulp:@fa-font-path: "/public/fonts";
CAK2

56

Ви повинні встановити правильний шлях шрифту. напр

my-style.scss

$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
  @extend .fa;
  @extend .fa-user;
}

3
Те саме для sass. Шлях ../assets/font-awesome/fontsпрацює для мене. Дякую.
Андрій

16

У моєму файлі style.css

/* You can add global styles to this file, and also import other style files */

@import url('../node_modules/font-awesome/css/font-awesome.min.css');

12

Вам потрібно буде скопіювати файли як частину процесу збирання. Наприклад, ви можете використовувати npm postinstallскрипт, щоб скопіювати файли у потрібний каталог:

"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"

Для деяких інструментів збирання існують попередні шрифтові пакети. Наприклад, у webpack є шрифт-awesome-webpack, який дозволяє вам просто require('font-awesome-webpack').


11

Використання веб-пакету та scss:

Встановіть шрифтовий дивовижний за допомогою npm (використовуючи інструкції з налаштування на https://fontawesome.com/how-to-use )

npm install @fortawesome/fontawesome-free

Далі, з допомогою копіювання-WebPack-плагін , скопіюйте WebFonts папки з node_modules в ваше DIST папки під час процесу складання WebPack. ( https://github.com/webpack-contrib/copy-webpack-plugin )

npm install copy-webpack-plugin

У webpack.config.js налаштуйте copy-webpack-plugin . ПРИМІТКА. За замовчуванням папка web dist4 за замовчуванням є "dist", тому ми копіюємо папку webfonts з node_modules в папку dist.

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    plugins: [
        new CopyWebpackPlugin([
            { from: './node_modules/@fortawesome/fontawesome-free/webfonts', to: './webfonts'}
        ])
    ]
}

Нарешті, у вашому файлі main.scss скажіть fontawesome, куди було скопійовано папку веб-шрифтів та імпортуйте файли SCSS, які ви хочете, з node_modules .

$fa-font-path: "/webfonts"; // destination folder in dist
//Adapt the path to be relative to your main.scss file
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

//Include at least one of the below, depending on what icons you want.
//Adapt the path to be relative to your main.scss file
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";

@import "../node_modules/@fortawesome/fontawesome-free/scss/v4-shims"; // if you also want to use `fa v4`  like: `fa fa-address-book-o` 

і застосуйте наступне font-familyдо потрібного регіону у вашому html-документі, де ви хочете використовувати значки fontawesome.

Приклад :

 body {
      font-family: 'Font Awesome 5 Free'; // if you use fa v5 (regular/solid)
      // font-family: 'Font Awesome 5 Brands'; // if you use fa v5 (brands)
    }

1
добре працює для мене, мені просто довелося скорегувати шлях від@import "../node_modules/[...]"@import "@/../node_modules/[...]"
мекографа

Ви можете додати псевдонім на webpack.config.js: resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}а потім@import "node_modules/[...]
Стівен Альмерот

8

За допомогою Expressjs публікуйте це:

app.use('/stylesheets/fontawesome', express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/'));

І ви можете побачити це за адресою: yourdomain.com/stylesheets/fontawesome/css/all.min.css


FontAwesome рекомендують встановити їх npm-пакет у вигляді devDependency. Щоб це рішення спрацьовувало (на виробництві), чи слід встановлювати пакет як звичайну залежність?
Джон Дж. Каміллері

1
Щоб відповісти на моє власне питання: так, його потрібно встановити, --saveа не--save-dev
Джон Дж. Каміллері,

5

Ви можете додати його між <head></head>тегом так:

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

Або яким би не був ваш шлях до вашого node_modules.

Редагувати (2017-06-26) - Відмова від відповідальності: Є кращі відповіді. ЗАБУДУТЬСЯ НЕ ВИКОРИСТОВУВАТИ ЦІЙ МЕТОД. На момент отримання оригінальної відповіді хороші інструменти не були такими поширеними. З поточними інструментами збирання, такими як вебпакет чи перегляд веб-сторінок, використовувати цю відповідь, мабуть, не має сенсу. Я можу його видалити, але я думаю, що важливо виділити різні варіанти, які є, а також можливі доси та недоліки.


16
Я не думаю, що хтось хотів би включити каталог node_modules до збірки та посилатися на нього безпосередньо.
Фабіан Лейтгеб

5
Я розумію, але це все-таки варіант. Немає однозначної відповіді на рішення. :) Якщо у вас є система комплектування, ви можете, @import '../node_modules/...'як і інші відповіді вказали.
Con Antonakos

1
порівняно з іншими відповідями, я вважаю, що це найкраще. ви все ще посилаєтесь на відносний шлях через node_modules в інших відповідях. якби розташування файлу css всередині font-awesomeбуло змінено, для цього знадобиться налаштування або обслуговування стільки, скільки інші відповіді. відмінність полягає в тому, що ця відповідь не потребує ні перекладів, ні завдань. він просто розміщує імпорт саме там, де його слід очікувати; в <link>тег.
північний американський

3
Простий форддер з npm матиме мінімум 10 + MB, жоден користувач не захоче додавати цю вагу проекту з будь-якої причини. Вся суть npm полягає у наданні допомоги під час розробки та мінімізації / зменшення розміру виробництва після створення. Не думайте, що це хороший варіант, навіть коли він працює. ; )
T04435

Я додав таку відмову від відповідальності: Під час цієї оригінальної відповіді хороші інструменти не були такими поширеними. З поточними інструментами збирання, такими як вебпакет чи перегляд веб-сторінок, використовувати цю відповідь, мабуть, не має сенсу. Я можу його видалити, але я думаю, що важливо виділити різні варіанти, які є, а також можливі доси та недоліки.
Con Antonakos

3

Оскільки я зараз вивчаю вузол js, я також стикався з цією проблемою. Все, що я зробив - це, перш за все, встановити шрифтовий дивовижний за допомогою npm

npm install font-awesome --save-dev

після цього я встановив статичну папку для css та шрифтів:

app.use('/fa', express.static(__dirname + '/node_modules/font-awesome/css'));
app.use('/fonts', express.static(__dirname + '/node_modules/font-awesome/fonts'));

і в html:

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

і це чудово працює!


2

Якщо ви використовуєте npm, ви можете використовувати інструмент збірки Gulp.js для створення своїх пакетів шрифтів Awesome з SCSS або LESS. Цей приклад складе код з SCSS.

  1. Встановіть Gulp.js v4 локально та CLI V2 у всьому світі.

  2. Встановіть плагін під назвою gulp-sass за допомогою npm.

  3. Створіть файл main.scss у своїй загальнодоступній папці та скористайтеся цим кодом:

    $fa-font-path: "../webfonts";
    @import "fontawesome/fontawesome";
    @import "fontawesome/brands";
    @import "fontawesome/regular";
    @import "fontawesome/solid";
    @import "fontawesome/v4-shims";
  4. Створіть gulpfile.js у своєму каталозі додатків та скопіюйте це.

    const { src, dest, series, parallel } = require('gulp');
    const sass = require('gulp-sass');
    const fs = require('fs');
    
    function copyFontAwesomeSCSS() {
       return src('node_modules/@fortawesome/fontawesome-free/scss/*.scss')
         .pipe(dest('public/scss/fontawesome'));
    }
    
    function copyFontAwesomeFonts() {
       return src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
         .pipe(dest('public/dist/webfonts'));
     }
    
     function compileSCSS() { 
       return src('./public/scss/theme.scss')
         .pipe(sass()).pipe(dest('public/css'));
     }
    
     // Series completes tasks sequentially and parallel completes them asynchronously
     exports.build = parallel(
       copyFontAwesomeFonts,
       series(copyFontAwesomeSCSS, compileSCSS)
     );
  5. Запустіть "gulp build" у своєму командному рядку та спостерігайте за магією.


0

Я зіткнувся з цим питанням із подібною проблемою і подумав, що поділюсь іншим рішенням:

Якщо ви створюєте додаток Javascript, піктограми для приготування шрифту також можна посилатись безпосередньо через Javascript:

Спочатку виконайте кроки в цьому посібнику :

npm install @fortawesome/fontawesome-svg-core

Потім всередині вашого javascript:

import { library, icon } from '@fortawesome/fontawesome-svg-core'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel)

const fontIcon= icon({ prefix: 'fas', iconName: 'stroopwafel' })

Після вищезазначених кроків ви можете вставити значок всередині вузла HTML за допомогою:

htmlNode.appendChild(fontIcon.node[0]);

Ви також можете отримати доступ до HTML-рядку, що представляє піктограму, за допомогою:

fontIcon.html
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.