글꼴 굉장 5 번들 NPM을 통해

나는 webpack을 통해 필요한 글꼴 굉장 5 아이콘 만 번들하려고하지만 아이콘은 DOM에서 대체되지 않습니다.글꼴 굉장 5 번들 NPM을 통해

나는 documentation에서 필요한 모든 패키지를 추가했습니다 :

yarn add -D @fortawesome/fontawesome 
yarn add -D @fortawesome/fontawesome-pro-solid 
yarn add -D @fortawesome/fontawesome-pro-regular 
yarn add -D @fortawesome/fontawesome-free-brands

JS가 포함 된 다음 사용자 정의 :

"use strict"; 

import fontawesome from '@fortawesome/fontawesome'; 
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck'; 

fontawesome.icon(faCheck); 

function iconsDoneRendering() { 
    console.log('Icons have rendered'); // No output in console 
} 

fontawesome.dom.i2svg({ 
    callback: iconsDoneRendering, 
})

HTML 템플릿 :

<head> 
    <link rel="stylesheet" href="/css/app.css?v2.1.4"> <!-- contains fa-svg-with-js.css --> 
</head> 
<body> 
    <ul class="fa-ul"> 
     <li><span class="fa-li"><i class="far fa-phone"></i></span>List item 1</li> 
     <li><span class="fa-li"><i class="far fa-check"></i></span>List item 2</li> 
    </ul> 
    <script src="/js/app.js?v2.1.4"></script> 
</body>

svg 경로는 번들로 제공된 JS 파일 안에 있지만 어떤 메소드를 호출해야하는지 알 수 없습니다. 만약 그렇다면

"use strict"; 

import fontawesome from '@fortawesome/fontawesome'; 
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck'; 
import faPhone from '@fortawesome/fontawesome-pro-regular/faPhone'; 

fontawesome.library.add(faCheck,faPhone);

출처

2017-12-08 Daniel Potthast

동일한 문제가 있습니다. 문제를 해결할 수 있었습니까? – benembery

나는 CSS가 문서의 머리 부분에 추가되는 것을보고 있습니까? – benembery

나는 현재 불가능하다고 생각합니다 : "우리가 가지고있는 것을 지원하기 위해 약간의 수정이 필요할 것입니다. 현재 우리에게 최우선 과제입니다." –

우리는 방금 5.0.2 버전을 출시했으며 이와 관련된 몇 가지 버그를 수정하기 위해 @fortawesome NPM 패키지를 업데이트했습니다. 다른 것을 시도하기 전에 업그레이드해야합니다.

는

위의 예에서 누락 된 단계는 라이브러리에 아이콘을 추가하는 것입니다 :이 이미 대한 답변 실현

fontawesome.library.add(faCheck)

출처

2017-12-20 17:51:30

감사합니다. @ rob-madole 이것은 완벽하게 작동합니다. 빠른 업데이트에 감사드립니다. – benembery

감사합니다. 완벽하게 작동합니다! 위의 샘플을 수정했습니다. –

시도 대신

fontawesome.icon(faCheck);

의

fontawesome.library.add(faCheck);

을 사용하기 :

다음 JS 코드는 문제 (이후 v5.0.2에를) 해결 작동하지 않습니다. DOM 템플릿으로 질문을 업데이트하십시오. 그것이 그곳에 정의 된 방법을보기 위해서입니다.

출처

2017-12-08 11:06:57

이것은 작동하지 않습니다. 의견을 보내 주셔서 감사합니다. 질문을 업데이트했습니다. –

도이 문제를 시도했습니다. 그러나 일하지 않았다. 아이콘이 보이지 않습니다 .. 그래서 문제가 어디 있습니까? – Opa114

@ Opa114 오늘 Rob의 Font Awesome에서 이메일을 받았습니다. 그들은이 방법으로 사용되는 것을 의도하지 않았지만 지금 당장이 문제에 열심히 노력하고 있습니다. – benembery

,하지만 난 정보부터 전체 솔루션에 약간의 가시성을 제공하고 싶습니다 SVG 아이콘 대체를 실행하는 방법은 포함되어 있지 않습니다.

"use strict"; 

// Import FontAwesome: https://fontawesome.com/how-to-use/use-with-node-js 
import fontawesome from '@fortawesome/fontawesome'; 

// This enables using FontAwesome in CSS pseudo elements 
// see: https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements 
fontawesome.config.searchPseudoElements = true; 

// Icons should be imported individually to keep bundle size down 
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck'; 
import faPhone from '@fortawesome/fontawesome-pro-solid/faPhone'; 
fontawesome.library.add(faCheck, faPhone); 

// If really necessary, entire styles can be loaded instead of specifying individual icons 
//import solid from '@fortawesome/fontawesome-pro-solid'; 
//fontawesome.library.add(solid); 

// Execute SVG replacement 
fontawesome.dom.i2svg();

: 나는 당신처럼 프런트 엔드 HTML에서 사용 NPM & 웹팩을 통해 글꼴 최고 5를로드하는 경우

, 당신은 당신의 번들에 포함 된 당신의 JS에서 같은 것을 할 필요가있을 것이다

마지막 줄이 열쇠이므로 SVG 아이콘을 수동으로 바꾸어 실행해야합니다.

출처

2018-01-18 18:52:34 cr0ybot

글꼴 굉장 5 번들 NPM을 통해

답변

관련 문제