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

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

---

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 파일에서 자신 만의 폰트를 생성하는 이동합니다.

---

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

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

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

---

아이콘을 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" ... />

---

@ 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를 엽니 다
• 파일 | 수입
• 하단으로 스크롤하여 아이콘 | 글리프 정보
• Update Glyph Name to uniFXXX (XXX is something like 501, a higher number than the highest Unicode used in v4.5 of FontAwesome)
• Unicode Vlaue U+fXXX
• Click OK
• File | Save
• File | Generate Fonts ...
• Close FontForge
• Open your web project
• Copy your font files to the (in my project) "\Content\fonts\" folder.
• Edit "\Content\styles\fa\path.less" to be like:

@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;
    }

I know it may be 'controversial' to comment out other file types, but happy to hear how to generate .eot or .otf files in the comments.

• and finally, as Samuel mentions, update your CSS/LESS with:

  .fa-XXX:before { content: "\f501"; }

---

In Font Awesome 5, you can create custom icons with your own SVG data. Here's a demo GitHub repo that you can play with. And here's a CodePen that shows how something similar might be done in <script> blocks.

In either case, it simply involves using library.add() to add an object like this:

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
  ]
}

Note that the element labelled by the comment "svg path data" in the code sample is what will be assigned as the value of the d attribute on a <path> element that is a child of the <svg>. Like this (leaving out some details for clarity):

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

(Adapted from my similar answer here: https://stackoverflow.com/a/50338775/4642871)

---

I researched a bit into SVG webfonts and font creation, in my eyes if you want to "add" fonts to font-awesome already existing font you need to do the following:

go to inkscape and create a glyph, save it as SVG so you could read the code, make sure to assign it a unicode character which is not currently used so it will not conflict with any of the existing glyphs in the font. this could be hard so i think a better simpler approad would be replacing an existing glyph with your own (just choose one you dont use, copy the first part:

Save the svg then convert it to web-font using any online converter so your webfont would work in all browsers.

once this is done, you should have either an SVG with one of the glyphs replaced in which case youre done. if not you need to create the CSS for your new glyph, in this case try and reuse FAs existing CSS, and only add

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

---

If you want some icons (or all) from font-awesome including yout custom svg icons you can:

1- Go to http://fontawesome.io/ Download the zip and extract-it for example in your Desktop.

2- Go to http://fontastic.me/ use your email to create an account.

3- Once you have been logged-in click on the header option: Add More Icons.

4- Select the SVG of font-awesome located in your extracted zip inside fonts.

5- Repeat the procces uploading your own svg files.

6- Inside Home (at the header of the page) Select the icons you want to download, customize them to give your custom names and select publish to have a link or download the fonts and css.

Sorry about my english ! :D

참고URL : https://stackoverflow.com/questions/11426172/add-custom-icons-to-font-awesome