[svg] 멋진 글꼴에 사용자 정의 아이콘 추가

Program / 글쓴이

Font Awesome 아이콘 글꼴을 좋아하고 내 사이트의 대부분의 아이콘에 사용하고 싶지만 제공되는 것 외에도 몇 가지 사용자 지정 svg 아이콘이 있습니다.

Font Awesome 의 .svg 버전은 대부분 다음 <glyph />요소 로 구성되어 있습니다.

...
<glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 160q35 35 59.5 24.5t24.5 -61.5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61.5 24.5t24.5 59.5l166 166l-336 336l-340 -340l162 -162q35 -35 24.5 -59.5t-61.5 -24.5h-477 q-31 0 -55 25q-25 20 -25 55z" />
<glyph unicode="&#xf0c0;" horiz-adv-x="1880" d="M0 852v152q0 18 1 47.5t10 56.5t29.5 46.5t57.5 19.5q-45 29 -71.5 75.5t-26.5 104.5q0 43 16.5 82t46 68.5t68.5 46t82 16.5q45 0 84 -16.5t67.5 -46t46 -68.5t17.5 -82q0 -57 -27.5 -104t-72.5 -76q37 0 57.5 -19.5t29.5 -46.5t11 -56.5t2 -47.5v-152 q-14 -8 -23.5 -18.5t-27.5 -10.5h-328q-16 0 -26.5 10.5t-22.5 18.5zM158 57v387q0 78 45 138.5t98 109.5q10 10 25.5 21.5t33.5 15.5q18 6 41 7t45 5q61 10 130 19.5t135 19.5q-90 57 -144.5 151.5t-54.5 207.5q0 88 34 166.5t92 136t136 91.5t166 34t166 -34t136 -91.5 t92 -136t34 -166.5q0 -113 -54 -207t-145 -152q66 -10 134.5 -19t130.5 -20q23 -4 45 -5t41 -7q18 -4 33.5 -15.5t27.5 -21.5q66 -59 103.5 -116.5t37.5 -131.5v-387q-12 -6 -20 -13t-18.5 -14t-23.5 -14.5t-36 -15.5h-1368q-35 0 -54.5 22.5t-43.5 34.5zM1452 852v152 q0 18 2 47.5t11.5 56.5t30 46.5t56.5 19.5q-45 29 -72.5 75.5t-27.5 104.5q0 43 16.5 82t46 68.5t68.5 46t84 16.5q43 0 82 -16.5t68.5 -46t46 -68.5t16.5 -82q0 -57 -26.5 -104t-71.5 -76q37 0 56.5 -19.5t28.5 -46.5t11 -56.5t2 -47.5v-152q-12 -8 -22.5 -18.5 t-26.5 -10.5h-328q-18 0 -27.5 10.5t-23.5 18.5z" />
<glyph unicode="&#xf0c1;" horiz-adv-x="1597" d="M0 1137q0 88 34 166.5t92 137t136 92.5t168 34q86 0 166 -33t139 -92q8 -8 21.5 -20.5t26 -25t21.5 -25.5t9 -25q0 -18 -12 -31q-6 -8 -25 -12q-47 -10 -88 -22.5t-86 -31.5q-4 -4 -16 -4t-25.5 10.5t-31 21.5t-42 21.5t-57.5 10.5q-35 0 -66.5 -13.5t-54 -37t-36 -54 t-13.5 -67.5q0 -41 17.5 -75t43 -63.5t56.5 -56.5t57 -53l180 -178q23 -25 54.5 -37t66.5 -12q43 0 73 16t46 16q12 0 39 -21.5t55.5 -49t50 -55t21.5 -42.5q0 -29 -36 -51t-83 -38.5t-94 -26t-72 -9.5q-86 0 -164.5 33t-140.5 92l-303 305q-61 59 -94 139.5t-33 166.5z M578 1010q0 29 35.5 51t82.5 38.5t94 26t72 9.5q86 0 166 -33t139 -92l303 -305q61 -59 94 -139.5t33 -166.5q0 -90 -33.5 -167.5t-92 -136t-137.5 -92.5t-167 -34q-86 0 -165.5 34t-139.5 93q-8 8 -21.5 19.5t-25.5 25t-21.5 26.5t-9.5 26q0 18 13 28q6 8 24 12 q47 10 88 22.5t86 33.5q12 4 17 4q12 0 25.5 -10.5t30.5 -21.5t41 -21.5t58 -10.5q72 0 121 49.5t49 120.5q0 41 -17 76t-44 63.5t-56.5 55.5t-56.5 53l-178 180q-53 49 -123 50q-43 0 -72.5 -17.5t-46.5 -17.5q-12 0 -38.5 21.5t-55 49t-50 56t-21.5 41.5z" />
...

내 svg 아이콘 코드를 가져 와서 새 글리프 요소로 붙여 넣고 사용하지 않는 유니 코드 문자를 할당하는 것이 효과적입니까?

답변

부여 Icomoon을 시도합니다. 자신 만의 SVG를 업로드하여 라이브러리에 추가 한 다음 FontAwesome과 자신의 아이콘을 결합한 사용자 정의 글꼴을 만들 수 있습니다.

답변

당신은 줄 수 fontcustom 은 SVG 파일에서 자신 만의 폰트를 생성하는 이동합니다.

답변

Font Awesome 5에서는 고유 한 SVG 데이터로 사용자 정의 아이콘을 만들 수 있습니다. 다음 은 연주 할 수 있는 데모 GitHub 저장소 입니다. 그리고 여기에 CodePen을의 쇼가 비슷한이 수행 될 수있는 방법을 것을 <script>차단.

두 경우 모두 단순히 library.add()다음과 같은 객체를 추가하는 데 사용 됩니다.

export const faSomeObjectName = {
  // Use a prefix like 'fac' that doesn't conflict with a prefix in the standard Font Awesome styles
  // (So avoid fab, fal, fas, far, fa)
  prefix: string,
  iconName: string, // Any name you like
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode (if relevant)
    string // svg path data
  ]
}

코드 샘플에서 주석 “svg path data”로 레이블이 지정된 요소는의 하위 요소 인 요소 의 d속성 값으로 지정됩니다 . 이것처럼 (명확성을 위해 세부 사항을 남기고) :<path><svg>

<svg>
  <path d=SVG_PATH_DATA></path>
</svg>

( https://stackoverflow.com/a/50338775/4642871 여기에서 비슷한 대답을 채택했습니다. )

답변

아이콘을 FontAwesome 과 별도로 유지하고 나만의 커스텀 라이브러리를 만들고 유지하는 것이 좋습니다 . 개인적으로, 나는 자신의 아이콘 라이브러리를 만들려는 경우 FontAwesome을 별도로 유지하는 것이 훨씬 쉽다고 생각합니다 . 그런 다음 CDN에서 FontAwesome을 사이트에로드하여 최신 상태로 유지할 필요가 없습니다.

사용자 정의 아이콘을 만들 때는 Adobe Illustrator 또는 유사한 소프트웨어 를 통해 각 아이콘을 만드십시오 . 아이콘이 생성되면 SVG컴퓨터 에서 각각 개별적으로 형식으로 저장 하십시오.

다음으로, IcoMoon : http://icomoon.io 로 넘어가십시오 . http://icomoon.io 는 최고의 글꼴 생성 소프트웨어 (제 의견으로는)를 가지고 있으며 무료입니다. IcoMoon은 당신이 사용자 정의 아이콘 문자 모양 라이브러리를 다음 글꼴 라이브러리로 개별 SVG-저장 글꼴을 가져 생성 할 수 있습니다 eot, ttf, woff,와 svg. IcoMoon 이 생성하지 않는 형식 은 woff2입니다.

에서의 아이콘 팩 생성 한 후 IcoMoon를 ,로 향할 FontSquirrel : http://fontsquirrel.com를 자신의 글꼴 생성기를 사용합니다. IcoMoonttf 에서 생성 된 파일을 사용하십시오 . 새로 생성 된 아이콘 팩에서 아이콘 팩 형식 이 생겼습니다 .woff2

에 대한 확인 파일을 확인 eot, ttf, svg, woff, 그리고 woff2모두 같은 이름이다. 두 개의 서로 다른 웹 사이트 / 소프트웨어에서 아이콘 팩을 생성하고 있으며 생성 된 출력의 이름을 다르게 지정합니다.

두 위치 모두에 아이콘 팩용 CSS가 생성됩니다. 그러나 IcoMoon 에서 생성 된 CSS는 선언에 woff2형식을 포함하지 않습니다 @font-face {}. CSS를 프로젝트에 추가 할 때 추가해야합니다.

@font-face {
    font-family: 'customiconpackname';
    src: url('../fonts/customiconpack.eot?lchn8y');
    src: url('../fonts/customiconpack.eot?lchn8y#iefix') format('embedded-opentype'),
         url('../fonts/customiconpack.ttf?lchn8y') format('truetype'),
         url('../fonts/customiconpack.woff2?lchn8y') format('woff'),
         url('../fonts/customiconpack.woff?lchn8y') format('woff'),
         url('../fonts/customiconpack.svg?lchn8y#customiconpack') format('svg');
    font-weight: normal;
    font-style: normal;
}

IcoMoon 소프트웨어를 사용하여 아이콘 팩에있는 각 아이콘의 글리프 유니 코드 값을 얻을 수 있습니다 . 이 값은 CSS를 통해 아이콘을 할당하는 데 도움이 될 수 있습니다 ( 위 font-family의 예 에서 선언 된 것을 사용한다고 가정 @font-face {...}).

selector:after {
    font-family: 'customiconpackname';
    content: '\e953';
    }

텍스트 편집기에서 e953글꼴 팩으로 생성 된 svg파일 을 열면 글리프 유니 코드 값을 얻을 수도 있습니다 . 예 :

<glyph unicode="&#xe953;" glyph-name="eye" ... />

답변

당신이 가진 것에 달려 있습니다. svg 아이콘이 경로 인 경우 ‘d’속성을 새 <glyph> 요소에 복사하면 해당 글리프를 쉽게 추가 할 수 있습니다. 그러나 경로는 글꼴의 좌표계 (일반적으로 [0,0,2048,2048]-트루 타입 글꼴의 표준 인 EM 사각형)에 맞게 조정하고 원하는 기준선에 맞춰 정렬해야합니다.

그러나 모든 브라우저가 svg 글꼴을 지원하는 것은 아니므로 어디에서나 작동하려면 글꼴을 다른 형식으로 변환해야합니다.

Fontforge 는 svg 파일을 가져올 수 있고 (글리프 슬롯, 파일> 가져 오기 및 svg 이미지 선택) 모든 관련 글꼴 형식 (svg, truetype, woff 등)으로 변환 할 수 있습니다.

답변

@ Samuel-bergström에 대한 비슷한 접근 방식 :

  • Fontawesome SVG 다운로드 https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
  • FontForge 다운로드 http://fontforge.github.io/en-US/downloads/
  • Inkscape 다운로드
  • Inskscape를 열고 새 글꼴 아이콘으로 단일 레이어 모양을 만듭니다.
  • SVG 파일 저장, 잉크 스케이프 닫기
  • FontForge 열기 (여러 모니터가있는 경우 Windows-LeftArrow를 사용하여 모니터를 끄는 이상한 SWING Java 창이 있고 팝업에 모달 문제가 있으므로 위치를 변경하십시오. 작업 표시 줄을 확인해야했습니다)
  • 파일 | fontawesome-webfont.svg를 엽니 다
  • 파일 | 수입
  • 하단으로 스크롤하여 아이콘 | 글리프 정보
  • 글리프 이름을 uniFXXX로 업데이트합니다 (XXX는 FontAwesome v4.5에서 사용 된 가장 높은 유니 코드보다 높은 501과 같습니다)
  • 유니 코드 Vlaue U + fXXX
  • 확인을 클릭하십시오
  • 파일 | 저장
  • 파일 | 글꼴 생성 …
  • FontForge 닫기
  • 웹 프로젝트를 엽니 다
  • 글꼴 파일을 (내 프로젝트의) “\ Content \ fonts \”폴더로 복사하십시오.
  • “\ Content \ styles \ fa \ path.less”를 다음과 같이 편집하십시오.
@font-face {
      font-family: 'FontAwesome';
      //src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
      src:
    	//url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
        //url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
        url('@{fa-font-path}/fontawesomeregular.woff?v=@{fa-version}') format('woff'),
        url('@{fa-font-path}/fontawesomeregular.ttf?v=@{fa-version}') format('truetype'),
        url('@{fa-font-path}/fontawesomeregular.svg?v=@{fa-version}#fontawesomeregular') format('svg');
    //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
      font-weight: normal;
      font-style: normal;
    }

스 니펫 확장

다른 파일 형식을 주석 처리하는 것은 ‘논쟁 적’일 수 있지만 주석에서 .eot 또는 .otf 파일을 생성하는 방법을 듣고 기뻐합니다.

  • 마지막으로 Samuel이 언급했듯이 CSS / LESS를 다음과 같이 업데이트하십시오.

    .fa-XXX : {콘텐츠 이전 : “\ f501”; }

답변

SVG 웹 글꼴 및 글꼴 작성에 대해 조금 연구했습니다. 글꼴을 이미 존재하는 글꼴에 글꼴을 “추가”하려면 다음을 수행해야합니다.

inkscape로 이동하여 글리프를 만들고 SVG로 저장하여 코드를 읽을 수 있도록하고 현재 사용되지 않는 유니 코드 문자를 지정하여 글꼴의 기존 글리프와 충돌하지 않도록하십시오. 이것은 어려울 수 있으므로 더 간단한 approad가 기존 글리프를 자신의 것으로 바꾸는 것이라고 생각합니다 (사용하지 않는 것을 선택하고 첫 번째 부분을 복사하십시오).

svg를 저장 한 다음 온라인 변환기를 사용하여 웹 글꼴로 변환하면 웹 글꼴이 모든 브라우저에서 작동합니다.

이 작업이 완료되면 글리프 중 하나가 교체 된 SVG가 있어야합니다. 새 글리프에 대한 CSS를 만들어야하는 경우에는이 경우 기존 CSS의 FA를 다시 시도하고 추가하십시오.

>##CSS##
>.FA.NEW-GLYPH:after {
>content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'
>(other conditions should be copied from other fonts)
>}