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?
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?
Yanıtlar:
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'))
})
fa-font-path
istediğiniz konuma ayarlayarak yazı tipi statik yolunu da uyarlayabilirsiniz .
@fa-font-path: "/public/fonts";
Uygun yazı tipi yolunu ayarlamalısınız. Örneğin
$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
@extend .fa;
@extend .fa-user;
}
../assets/font-awesome/fonts
benim için çalışıyor. Teşekkürler.
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')
.
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-family
html 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)
}
@import "../node_modules/[...]"
için@import "@/../node_modules/[...]"
resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}
ve sonra@import "node_modules/[...]
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
devDependency
. Bu çözümün çalışması için (üretimde) paket düzenli bir bağımlılık olarak kurulmalı mı?
--save
değil--save-dev
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.
@import '../node_modules/...'
diğer cevapları da beğenebilirsiniz.
font-awesome
değ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.
Ş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!
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.
Gulp.js v4'ü yerel olarak ve CLI V2'yi global olarak yükleyin .
Npm kullanarak gulp -sass adlı bir eklenti kurun.
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";
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)
);
Komut satırınızda 'gulp build' komutunu çalıştırın ve sihri izleyin.
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