외부 파일없이 svg의 FontAwesome 아이콘 사용

Question

일부 SVG 요소가 FontAwesome의 아이콘 인 SVG (PHP 및/또는 자바 스크립트 사용)를 만들어야합니다. 외부 종속성이없는 경우 (예 : CSS 파일 가져 오기 등)).

내가 유사한 문제가 있지만 비슷한 문제가 있습니다. 외부 종속성이 있기 때문에 (예 : svg가 표시된 웹 페이지에서 FontAwesome (CSS 파일) 추가) stackoverflow 관련 질문입니다.

다른 점은, 필요한 모든 FontAwesome 정의가 svg의 일부인 All-in-one SVG가 필요하다는 것입니다. 사용자가 생성 된 SVG를 다운로드하여 svg로 계속 작업 할 수 있어야하기 때문입니다. 뷰어 또는 편집자.

하나의 svg에 하나의 "Font Awesome"아이콘의 정의를 넣는 방법이 있습니까?

나는(아마도) svg 정보 목록을 발견했습니다. 그래서 아이콘 경로는 SVG 코드로 사용할 수 있습니다. 그렇다면 누가 이것을 svg에서 사용할 수 있습니까?

---

// 업데이트 : 나는 다음과 같은 예를 발견,하지만 난 FontAwesome 정의를 포함하는 방법을 몰라 방법과 예제가있다

<?xml version="1.0" standalone="yes"?> 
<svg width="100%" height="100%" version="1.1" 
xmlns = 'http://www.w3.org/2000/svg'> 
    <defs> 
    <font id="Font2" horiz-adv-x="1000"> 
     <font-face font-family="Super Sans" font-weight="normal" font-style="italic" 
      units-per-em="1000" cap-height="600" x-height="400" 
      ascent="700" descent="300" 
      alphabetic="0" mathematical="350" ideographic="400" hanging="500"> 
     <font-face-src> 
      <font-face-name name="Super Sans Italic"/> 
     </font-face-src> 
     </font-face> 
     <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> 
     <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph> 
     <glyph unicode="@"><!-- Outline of @ glyph --></glyph> 
     <!-- more glyphs --> 
    </font> 
    </defs> 
</svg> 

Answer 1

:-(아이콘에 액세스 할 수 .

<svg width="500" height="200" version="1.1" xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200"> 
    <defs> 
     <style type="text/css"> 
     @font-face { 
      font-family: 'FontAwesome'; 
      src: url(data:font/opentype;base64,[...]) format('opentype'); 
     } 
     </style> 
    </defs> 
    <rect x="0" y="0" height="100" width="500" fill="#eee" /> 
    <text x="20" y="50" font-family="FontAwesome" font-weight="normal" font-size="32"> 
     &#xf007 
    </text> 
    </svg> 

가바꾸기 : SVG 글꼴과는 IE 나 파이어 폭스에서 작동하지 않습니다 당신은 당신이 모든 곳에서 작업 할 경우 @font-face 같은 데이터 URI 및 embed로 FontAwesome을 인코딩해야은 폰트의 base64 인코딩 버전을 사용합니다. .ttf 또는 .otf 파일을 base64 서비스 나 명령 행 openssl base64 -in <infile> -out <outfile>에 업로드 할 수 있습니다.

FontAwesome의 라이브러리를 하위 세트로 만들려면 icomoon http://icomoon.io/app/#library으로 가서 FontAwesome 라이브러리를 추가하십시오. 그런 다음 필요한 아이콘을 선택하고 zip을 다운로드 한 다음 ttf를 http://www.opinionatedgeek.com/dotnet/tools/base64encode/과 같은 base64 인코딩 서비스에 업로드하고 결과 문자열을 src: 글꼴면에 붙여 넣습니다.