Düğüm modüllerinden yazı tipi harika simgeler nasıl kullanılır


111

Kullanarak font-awesome 4.0.3 simgelerini yükledim npm install.

Düğüm modüllerinden kullanmam gerekirse html dosyasında nasıl kullanmalıyım?

Daha az dosyayı düzenlemem gerekirse, onu düğüm modüllerinde düzenlemem gerekir mi?


Bunu yapmanın "doğru" yolunu hiç buldunuz mu? Şu anda sadece node_modules'deki şeyleri genel dizinime kopyalamak için bir yutkunma görevi kullanıyorum.
sjmeverett

Onu daha sonra kameriye bileşeni olarak kullandım ...
Govan

Yanıtlar:


106

Olarak yükle npm install font-awesome --save-dev

Geliştirme az dosyanızda, daha az kullanarak tüm yazı tipini içe aktarabilir @import "node_modules/font-awesome/less/font-awesome.less"veya bu dosyaya bakabilir ve yalnızca ihtiyacınız olan bileşenleri içe aktarabilirsiniz. Bunun temel simgeler için minimum olduğunu düşünüyorum:

/* 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";

Bir not olarak, bunu yaparak bu kadar baytı kaydetmeyeceksiniz. Her iki durumda da 2-3 bin satır küçültülmemiş CSS ekleyeceksiniz.

Ayrıca yazı tiplerini /fonts/genel dizininizde adlandırılan bir klasörden sunmanız gerekir. Bunları oraya basit bir yudum görevi ile kopyalayabilirsiniz, örneğin:

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

9
Yazı tiplerinin bir yazı tipi klasörüne de sunulması gerektiğinin daha fazla vurgulanması gerekiyor ... Bu basit şeyi çözmeye çalışmak için muhtemelen bir saatimi harcadım.
Alex J

3
Değişkeni fa-font-pathistediğiniz konuma ayarlayarak yazı tipi statik yolunu da uyarlayabilirsiniz .
zusatzstoff

Yukarıdaki örnekte, @fa-font-path: "/public/fonts";
gulp

56

Uygun yazı tipi yolunu ayarlamalısınız. Örneğin

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
Aynı şey sass için. Yol ../assets/font-awesome/fontsbenim için çalışıyor. Teşekkürler.
Andrey

16

Style.css dosyamda

/* 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

Oluşturma işleminizin bir parçası olarak dosyaları kopyalamanız gerekecektir. Örneğin npm postinstall, dosyaları doğru dizine kopyalamak için bir komut dosyası kullanabilirsiniz :

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

Bazı derleme araçları için önceden var olan harika font paketleri vardır. Örneğin, webpack, basitleştirmenizi sağlayan harika font web paketine sahiptir require('font-awesome-webpack').


11

Web paketi ve scss kullanma:

Npm kullanarak font-awesome'i yükleyin ( https://fontawesome.com/how-to-use adresindeki kurulum talimatlarını kullanarak )

npm install @fortawesome/fontawesome-free

Sonraki kullanılarak kopya-webpack-eklentisi , kopya webfonts gelen klasör node_modules sizin için dist sizin webpack oluşturma işlemi sırasında klasöründen. ( https://github.com/webpack-contrib/copy-webpack-plugin )

npm install copy-webpack-plugin

Gelen webpack.config.js , yapılandırmak kopyalamaya karşı webpack-eklentisi . NOT: Varsayılan webpack 4 dist klasörü "dist" dir, bu nedenle webfonts klasörünü node_modules'den dist klasörüne kopyalıyoruz.

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

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

Son olarak, main.scss dosyanızda fontawesome'a webfonts klasörünün nereye kopyalandığını söyleyin ve node_modules'den istediğiniz SCSS dosyalarını içe aktarın .

$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` 

ve aşağıdakileri font-familyhtml belgenizde fontawesome simgelerini kullanmak istediğiniz bölgeye / bölgelere uygulayın.

Örnek :

 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
Benim için ceza işleri, sadece gelen yolunu ayarlamak zorunda @import "../node_modules/[...]"için@import "@/../node_modules/[...]"
mecograph

Webpack.config.js'ye bir takma ad ekleyebilirsiniz: resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}ve sonra@import "node_modules/[...]
Steven Almeroth

8

Expressjs ile herkese açık hale getirin:

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

Ve bunu şurada görebilirsiniz: yourdomain.com/stylesheets/fontawesome/css/all.min.css


FontAwesome, npm paketlerinin bir devDependency. Bu çözümün çalışması için (üretimde) paket düzenli bir bağımlılık olarak kurulmalı mı?
John J. Camilleri

1
Kendi sorumu cevaplamak için: Evet, birlikte yüklenmesi gerekiyor --savedeğil--save-dev
John J. Camilleri

5

Bunu <head></head>etiketinizin arasına şu şekilde ekleyebilirsiniz :

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

Ya da yolun ne olursa olsun node_modules.

Düzenleme (2017-06-26) - Sorumluluk Reddi: DAHA İYİ CEVAPLAR VARDIR. LÜTFEN BU YÖNTEMİ KULLANMAYIN. Bu orijinal cevabın verildiği sırada, iyi araçlar o kadar yaygın değildi. Web paketi veya browsererify gibi mevcut derleme araçlarıyla, bu cevabı kullanmak muhtemelen mantıklı değildir. Onu silebilirim, ancak birinin sahip olduğu çeşitli seçenekleri ve olası yapılması ve yapılmaması gerekenleri vurgulamanın önemli olduğunu düşünüyorum.


16
Hiç kimsenin node_modules dizinini bir yapıya dahil etmek ve ona doğrudan başvurmak isteyeceğini sanmıyorum.
Fabian Leutgeb

5
Anlıyorum, ama yine de bir seçenek. Çözüm için tek bir cevap yok. :) Eğer bir bundling sisteminiz varsa, o zaman @import '../node_modules/...'diğer cevapları da beğenebilirsiniz.
Con Antonakos

1
diğer cevaplarla karşılaştırıldığında, bunun en iyisi olduğunu düşünüyorum. hala diğer yanıtlarda node_modules aracılığıyla göreli yola başvuruyorsunuz. içindeki css dosyasının konumu font-awesomedeğişecekse, bu, diğer yanıtlar kadar ince ayar veya bakım gerektirecektir. fark, bu cevabın aktarmaya veya göreve ihtiyaç duymamasıdır. sadece ithalatı tam olarak olması gereken yere yerleştirir; Bir de <link>etiketinin.
northamerican

3
Basit bir npm forder, minimum 10 + MB'ye sahip olacaktır, hiçbir kullanıcı herhangi bir nedenle bu ağırlığı bir projeye eklemek istemeyecektir. Npm'nin tüm amacı, Geliştirme sırasında yardımcı olmak ve oluşturulduktan sonra Üretim boyutunu küçültmek / azaltmaktır. Çalışsa bile bunun iyi bir seçenek olduğunu düşünmeyin. ; )
T04435

Şu feragatnameyi ekledim: Bu orijinal cevabı aldığım sırada, iyi araçlar o kadar yaygın değildi. Web paketi veya browsererify gibi mevcut derleme araçlarıyla, bu cevabı kullanmak muhtemelen mantıklı değildir. Onu silebilirim, ancak birinin sahip olduğu çeşitli seçenekleri ve olası yapılması ve yapılmaması gerekenleri vurgulamanın önemli olduğunu düşünüyorum.
Con Antonakos

3

Şu anda js düğümünü öğrendiğim için bu sorunla da karşılaştım. Tek yaptığım, her şeyden önce npm kullanarak harika fontu kurmaktı.

npm install font-awesome --save-dev

bundan sonra, css ve yazı tipleri için statik bir klasör belirledim:

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

ve html'de:

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

ve iyi çalışıyor!


2

Eğer npm kullanıyorsanız, SCSS veya LESS'ten Font Awesome paketlerinizi oluşturmak için Gulp.js'yi bir oluşturma aracı kullanabilirsiniz. Bu örnek, kodu SCSS'den derleyecektir.

  1. Gulp.js v4'ü yerel olarak ve CLI V2'yi global olarak yükleyin .

  2. Npm kullanarak gulp -sass adlı bir eklenti kurun.

  3. Ortak klasörünüzde bir main.scss dosyası oluşturun ve şu kodu kullanın:

    $fa-font-path: "../webfonts";
    @import "fontawesome/fontawesome";
    @import "fontawesome/brands";
    @import "fontawesome/regular";
    @import "fontawesome/solid";
    @import "fontawesome/v4-shims";
  4. Uygulama dizininizde bir gulpfile.js oluşturun ve bunu kopyalayın.

    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. Komut satırınızda 'gulp build' komutunu çalıştırın ve sihri izleyin.


0

Bu soruya benzer bir problemle geldim ve başka bir çözümü paylaşacağımı düşündüm:

Bir Javascript uygulaması oluşturuyorsanız, font harika simgelerine doğrudan Javascript aracılığıyla da başvurulabilir:

İlk önce bu kılavuzdaki adımları uygulayın :

npm install @fortawesome/fontawesome-svg-core

Ardından javascript'inizin içinde:

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' })

Yukarıdaki adımlardan sonra, simgeyi bir HTML düğümüne şu şekilde ekleyebilirsiniz:

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

Simgeyi temsil eden HTML dizesine şu şekilde de erişebilirsiniz:

fontIcon.html
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.