Thêm biểu tượng tùy chỉnh cho phông chữ tuyệt vời

Tôi yêu Font tuyệt vời biểu tượng và muốn sử dụng nó cho hầu hết các biểu tượng trên trang web của tôi nhưng có một vài biểu tượng svg tùy chỉnh mà tôi cần ngoài những gì được cung cấp.

Tôi nhận thấy rằng phiên bản .svg của Font Awesome bao gồm hầu hết các <glyph />yếu tố sau:

...
<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" />
...

Nó có hiệu quả để lấy mã biểu tượng svg của tôi, dán nó vào như một phần tử glyph mới và gán một char unicode không sử dụng không?

Hãy thử Icomoon . Bạn có thể tải lên các SVG của riêng mình, thêm chúng vào thư viện, sau đó tạo một phông chữ tùy chỉnh kết hợp FontAwgie với các biểu tượng của riêng bạn.

Bạn có thể cho fontcustom đi, nó tạo phông chữ của riêng bạn từ các tập tin svg.

Trong Font Awesome 5, bạn có thể tạo các biểu tượng tùy chỉnh với dữ liệu SVG của riêng bạn. Đây là bản repo GitHub demo mà bạn có thể chơi cùng. Và đây là CodePen cho thấy cách thức tương tự có thể được thực hiện trong <script>các khối.

Trong cả hai trường hợp, nó chỉ đơn giản liên quan đến việc sử dụng library.add()để thêm một đối tượng như thế này:

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

Lưu ý rằng phần tử được gắn nhãn bởi nhận xét "dữ liệu đường dẫn svg" trong mẫu mã là giá trị sẽ được gán làm giá trị của dthuộc tính trên <path>phần tử là con của <svg>. Như thế này (để lại một số chi tiết cho rõ ràng):

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

(Chuyển thể từ câu trả lời tương tự của tôi ở đây: https://stackoverflow.com/a/50338775/4642871 )

Phụ thuộc vào những gì bạn có. Nếu biểu tượng svg của bạn chỉ là một đường dẫn, thì việc thêm glyph đó bằng cách sao chép thuộc tính 'd' vào một phần tử <glyph> mới là đủ dễ dàng. Tuy nhiên, đường dẫn cần được thu nhỏ theo hệ tọa độ của phông chữ (hình vuông EM, thường là [0,0,2048,2048] - tiêu chuẩn cho phông chữ Truetype) và căn chỉnh với đường cơ sở bạn muốn.

Tuy nhiên, không phải tất cả các trình duyệt đều hỗ trợ phông chữ svg, vì vậy bạn cũng sẽ phải chuyển đổi nó sang các định dạng khác nếu bạn muốn nó hoạt động ở mọi nơi.

Fontforge có thể nhập các tệp svg (chọn một vị trí glyph, Tệp> Nhập và sau đó chọn hình ảnh svg của bạn) và sau đó bạn có thể chuyển đổi sang tất cả các định dạng phông chữ có liên quan (svg, truetype, woff, v.v.).

Tôi khuyên bạn nên tách các biểu tượng của mình khỏi FontAwgie và tạo và duy trì thư viện tùy chỉnh của riêng bạn. Cá nhân, tôi nghĩ việc duy trì việc giữ FontAwgie sẽ dễ dàng hơn nhiều tách biệt nếu bạn định tạo thư viện biểu tượng của riêng mình. Sau đó, bạn có thể tải FontAwgie vào trang web của mình từ CDN và không bao giờ phải lo lắng về việc cập nhật nó.

Khi tạo biểu tượng tùy chỉnh của riêng bạn, hãy tạo từng biểu tượng qua Adobe Illustrator hoặc phần mềm tương tự. Khi các biểu tượng của bạn được tạo, hãy lưu từng SVGđịnh dạng riêng lẻ trên máy tính của bạn.

Tiếp theo, hãy đến IcoMoon : http://icomoon.io , nơi có phần mềm tạo phông chữ tốt nhất (theo ý kiến ​​của tôi), và nó miễn phí. IcoMoon sẽ cho phép bạn nhập các phông chữ svg-lưu cá nhân của bạn thành một thư viện font chữ, sau đó tạo thư viện hình tượng biểu tượng tùy chỉnh của bạn trong eot, ttf, woff, và svg. Một định dạng mà IcoMoon không tạo ra là woff2.

Sau khi tạo gói biểu tượng của bạn tại IcoMoon , hãy truy cập FontSquirrel : http://fontsquirrel.com và sử dụng trình tạo phông chữ của họ. Sử dụng ttftệp của bạn được tạo tại IcoMoon . Trong gói biểu tượng mới được tạo, giờ đây bạn sẽ có gói biểu tượng của mình ở woff2định dạng.

Hãy chắc chắn rằng các tập tin cho eot, ttf, svg, woff, và woff2tất cả đều có cùng tên. Bạn đang tạo một gói biểu tượng từ hai trang web / phần mềm khác nhau và chúng đặt tên đầu ra được tạo khác nhau.

Bạn sẽ tạo CSS cho gói biểu tượng của mình ở cả hai vị trí. Nhưng CSS được tạo tại IcoMoon sẽ không bao gồm woff2định dạng trong @font-face {}khai báo của bạn . Đảm bảo thêm điều đó khi bạn thêm CSS vào dự án của mình:

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

Hãy nhớ rằng bạn có thể nhận các giá trị glyph unicode của từng biểu tượng trong gói biểu tượng của mình bằng phần mềm IcoMoon . Các giá trị này có thể hữu ích trong việc gán biểu tượng của bạn thông qua CSS, như trong (giả sử chúng tôi đang sử dụng font-familykhai báo trong ví dụ @font-face {...}trên):

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

Bạn cũng có thể nhận giá trị glyph unicode e953nếu bạn mở svgtệp được tạo bằng phông chữ trong trình soạn thảo văn bản. Ví dụ:

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

Cách tiếp cận tương tự với @ Samuel-bergström:

• Tải xuống Fontawgie SVG https://github.com/FortAwgie/Font-Awgie/blob/master/src/assets/font-awclaw/fonts/fontawemme-webfont.svg
• Tải xuống FontForge http://fontforge.github.io/en-US/doads/
• Tải xuống Inkscape
• Mở Inskscape và tạo một hình dạng lớp duy nhất làm biểu tượng phông chữ mới của bạn
• Lưu tệp SVG, Đóng Inkscape
• Mở FontForge (Nếu bạn có nhiều màn hình, hãy sử dụng Windows-LeftArrow, để định vị lại khi chúng có các cửa sổ java SWING lạ tắt màn hình và gặp sự cố về chế độ với cửa sổ bật lên - Tôi phải kiểm tra một số thanh tác vụ của mình)
• Tập tin | Mở fontawgie-webfont.svg
• Tập tin | Nhập khẩu
• Cuộn xuống phía dưới, Nhấp chuột phải vào Biểu tượng | Thông tin Glyph
• Cập nhật tên Glyph thành uniFXXX (XXX là một cái gì đó giống như 501, một con số cao hơn Unicode cao nhất được sử dụng trong v4.5 của FontAwgie)
• Unicode Vlaue U + fXXX
• Nhấn vào OK
• Tập tin | Tiết kiệm
• Tập tin | Tạo phông chữ ...
• Đóng FontForge
• Mở dự án web của bạn
• Sao chép các tệp phông chữ của bạn vào thư mục (trong dự án của tôi) "\ Nội dung \ phông chữ \".
• Chỉnh sửa "\ Content \ style \ fa \ path.less" để được như sau:

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

Tôi biết có thể 'gây tranh cãi' khi bình luận các loại tệp khác, nhưng rất vui khi biết cách tạo tệp .eot hoặc .otf trong các nhận xét.

• và cuối cùng, như Samuel đề cập, hãy cập nhật CSS / LESS của bạn với:

  .fa-XXX: trước {nội dung: "\ f501"; }

Tôi đã nghiên cứu một chút về webfont và tạo phông chữ SVG, trong mắt tôi nếu bạn muốn "thêm" phông chữ vào phông chữ đã có sẵn phông chữ tuyệt vời, bạn cần phải làm như sau:

đi đến inkscape và tạo glyph, lưu nó dưới dạng SVG để bạn có thể đọc mã, đảm bảo gán cho nó một ký tự unicode hiện không được sử dụng để nó không xung đột với bất kỳ glyphs hiện có nào trong phông chữ. điều này có thể khó khăn vì vậy tôi nghĩ rằng một sự chấp thuận đơn giản tốt hơn sẽ thay thế một glyph hiện có bằng chính bạn (chỉ cần chọn một cái bạn không sử dụng, sao chép phần đầu tiên:

Lưu Svg sau đó chuyển đổi nó thành phông chữ web bằng bất kỳ trình chuyển đổi trực tuyến nào để webfont của bạn hoạt động trong tất cả các trình duyệt.

một khi điều này được thực hiện, bạn nên có một SVG với một trong những glyph được thay thế trong trường hợp bạn đã hoàn thành. nếu không, bạn cần tạo CSS cho glyph mới của mình, trong trường hợp này hãy thử và sử dụng lại CSS hiện có của FA và chỉ thêm

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

Nếu bạn muốn một số biểu tượng (hoặc tất cả) từ phông chữ tuyệt vời bao gồm các biểu tượng svg tùy chỉnh bạn có thể:

1- Truy cập http: // fontawgie.io/ Tải xuống mã zip và giải nén nó chẳng hạn trong Máy tính để bàn của bạn.

2- Truy cập http://fontastic.me/ sử dụng email của bạn để tạo tài khoản.

3- Khi bạn đã đăng nhập, nhấp vào tùy chọn tiêu đề: Thêm biểu tượng khác.

4- Chọn SVG của phông chữ tuyệt vời nằm trong zip được trích xuất của bạn bên trong phông chữ.

5- Lặp lại các tập tin tải lên các tập tin svg của riêng bạn.

6- Inside Home (ở phần đầu của trang) Chọn các biểu tượng bạn muốn tải xuống, tùy chỉnh chúng để đặt tên tùy chỉnh của bạn và chọn xuất bản để có liên kết hoặc tải xuống phông chữ và css.

Xin lỗi về tiếng Anh của tôi ! : D