เพิ่มไอคอนที่กำหนดเองเพื่อตัวอักษรที่ยอดเยี่ยม

ฉันชอบแบบอักษรไอคอนตัวอักษรที่ยอดเยี่ยมและต้องการใช้สำหรับไอคอนส่วนใหญ่ในเว็บไซต์ของฉัน แต่มีไอคอน svg ที่กำหนดเองไม่กี่ตัวที่ฉันต้องการนอกเหนือไปจากสิ่งที่มีให้

ฉันสังเกตว่าFont. รุ่น SVVGนั้นประกอบไปด้วย<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 ของฉันวางลงในองค์ประกอบสัญลักษณ์ใหม่และกำหนด char unicode ที่ไม่ได้ใช้หรือไม่

ให้Icomoonลอง คุณสามารถอัปโหลด SVG ของคุณเองเพิ่มลงในไลบรารีจากนั้นสร้างแบบอักษรที่กำหนดเองซึ่งรวม FontAwesome กับไอคอนของคุณเอง

คุณสามารถสร้างfontcustomได้เองมันสร้างฟอนต์ของคุณเองจากไฟล์ svg

ใน Font Awesome 5 คุณสามารถสร้างไอคอนที่กำหนดเองด้วยข้อมูล SVG ของคุณเอง ต่อไปนี้เป็นตัวอย่าง GitHub repoที่คุณสามารถเล่นได้ และนี่คือ 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" ในตัวอย่างรหัสคือสิ่งที่จะได้รับมอบหมายให้เป็นค่าของdแอตทริบิวต์ในองค์ประกอบที่เป็นลูกของที่<path> <svg>เช่นนี้ (ออกจากรายละเอียดบางอย่างเพื่อความชัดเจน):

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

(ดัดแปลงมาจากคำตอบที่คล้ายกันของฉันที่นี่: https://stackoverflow.com/a/50338775/4642871 )

ฉันแนะนำให้เก็บไอคอนของคุณแยกจากFontAwesomeและสร้างและบำรุงรักษาห้องสมุดที่คุณกำหนดเอง โดยส่วนตัวแล้วฉันคิดว่ามันง่ายกว่ามากในการรักษาFontAwesomeแยกต่างหากถ้าคุณกำลังจะสร้างไลบรารี่ไอคอนของคุณเอง จากนั้นคุณสามารถโหลด FontAwesome ลงในไซต์ของคุณจาก CDN และไม่ต้องกังวลเกี่ยวกับการอัปเดตล่าสุด

เมื่อสร้างไอคอนที่กำหนดเองของคุณให้สร้างแต่ละไอคอนผ่าน Adobe Illustratorหรือซอฟต์แวร์ที่คล้ายกัน เมื่อไอคอนของคุณถูกสร้างขึ้นให้บันทึกแต่ละรายการในSVGรูปแบบบนคอมพิวเตอร์ของคุณ

จากนั้นไปที่IcoMoon : http://icomoon.ioซึ่งมีซอฟต์แวร์สร้างฟอนต์ที่ดีที่สุด (ในความคิดของฉัน) และฟรี IcoMoonจะช่วยให้คุณนำเข้าแบบอักษร SVG บันทึกบุคคลของคุณให้เป็นห้องสมุด font แล้วสร้างห้องสมุดไอคอนสัญลักษณ์ของคุณเองในeot, ttf, และwoff svgรูปแบบหนึ่งIcoMoonwoff2ไม่ก่อให้เกิดเป็น

หลังจากสร้างไอคอนแพ็คของคุณที่IcoMoonตรงไปที่FontSquirrel : http://fontsquirrel.comและใช้ตัวสร้างฟอนต์ของพวกเขา การใช้งานของttfไฟล์ที่สร้างขึ้นที่IcoMoon ในชุดไอคอนที่สร้างขึ้นใหม่ตอนนี้คุณจะมีชุดไอคอนในwoff2รูปแบบ

ตรวจสอบให้แน่ใจไฟล์สำหรับeot, ttf, svg, woffและwoff2ทุกคนที่มีชื่อเดียวกัน คุณกำลังสร้างไอคอนแพ็คจากเว็บไซต์ / ซอฟต์แวร์ที่แตกต่างกันสองรายการและพวกเขาตั้งชื่อผลลัพธ์ที่สร้างขึ้นต่างกัน

คุณจะสร้าง CSS สำหรับชุดไอคอนของคุณที่ทั้งสองแห่ง แต่ CSS ที่สร้างขึ้นที่IcoMoonจะไม่รวม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';
    }

คุณยังสามารถรับค่า glyph unicode ได้e953หากคุณเปิดไฟล์ฟอนต์แพ็คที่สร้างขึ้นsvgในโปรแกรมแก้ไขข้อความ เช่น:

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

ขึ้นอยู่กับสิ่งที่คุณมี หากไอคอน svg ของคุณเป็นเพียงเส้นทางก็ง่ายพอที่จะเพิ่มสัญลักษณ์นั้นโดยเพียงแค่คัดลอกแอตทริบิวต์ 'd' ไปยังองค์ประกอบ <glyph> ใหม่ อย่างไรก็ตามเส้นทางจะต้องมีการปรับขนาดให้เป็นระบบพิกัดของฟอนต์ (EM-square ซึ่งโดยทั่วไปคือ [0,0,2048,2048] - มาตรฐานสำหรับฟอนต์ Truetype) และปรับให้ตรงกับค่าพื้นฐานที่คุณต้องการ

ไม่ใช่ทุกเบราว์เซอร์ที่รองรับฟอนต์ 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 ปิด Inkscape
• เปิด FontForge (หากคุณมีจอภาพหลายจอให้ใช้ Windows-LeftArrow เพื่อจัดวางใหม่เนื่องจากมีหน้าต่างจาวา SWING จาวาที่แปลก ๆ ที่ปิดจอมอนิเตอร์และมีปัญหาเกี่ยวกับป๊อปอัป - ฉันต้องตรวจสอบแถบงานของฉัน)
• ไฟล์ | เปิด fontawesome-webfont.svg
• ไฟล์ | นำเข้า
• เลื่อนลงไปด้านล่างคลิกขวาที่ไอคอน | ข้อมูลสัญลักษณ์
• อัปเดตชื่อสัญลักษณ์เพื่อเป็น uniFXXX (XXX เป็นอะไรที่เหมือน 501 ซึ่งเป็นจำนวนที่สูงกว่า Unicode ที่สูงที่สุดที่ใช้ใน v4.5 ของ FontAwesome)
• Unicode 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 ในความคิดเห็น

• และสุดท้ายดังที่ซามูเอลกล่าวถึงอัปเดต CSS / LESS ของคุณด้วย:

  .fa-XXX: ก่อนหน้า {content: "\ f501"; }

ฉันค้นคว้าเล็กน้อยเกี่ยวกับ SVG webfonts และการสร้างแบบอักษรในสายตาของฉันถ้าคุณต้องการที่จะ "เพิ่ม" แบบอักษรไปยังตัวอักษรที่ยอดเยี่ยมที่มีอยู่แล้วคุณต้องทำดังต่อไปนี้:

ไปที่ inkscape และสร้างสัญลักษณ์บันทึกเป็น SVG เพื่อให้คุณสามารถอ่านรหัสตรวจสอบให้แน่ใจว่าได้กำหนดอักขระยูนิโค้ดซึ่งไม่ได้ใช้งานอยู่ในปัจจุบันดังนั้นจะไม่ขัดแย้งกับร่ายมนตร์ที่มีอยู่ในแบบอักษร นี่อาจเป็นเรื่องยากดังนั้นฉันคิดว่าการอนุมัติที่ง่ายกว่าจะเปลี่ยน glyph ที่มีอยู่เป็นของคุณเอง (เพียงแค่เลือกอันที่คุณไม่ได้ใช้ให้คัดลอกส่วนแรก:

บันทึก svg จากนั้นแปลงเป็นเว็บแบบอักษรโดยใช้ตัวแปลงออนไลน์ใด ๆ เพื่อให้ webfont ของคุณสามารถทำงานได้ในทุกเบราว์เซอร์

เมื่อทำสิ่งนี้เสร็จแล้วคุณควรจะมี SVG ที่มี glyphs อันใดอันหนึ่งแทนที่ในกรณีที่คุณทำเสร็จแล้ว ถ้าไม่ใช่คุณจำเป็นต้องสร้าง CSS สำหรับสัญลักษณ์ใหม่ของคุณในกรณีนี้ลองและนำ CSS ที่มีอยู่ของ FAs กลับมาใช้ใหม่และเพิ่มเฉพาะ

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

หากคุณต้องการไอคอน (หรือทั้งหมด) จากแบบอักษร - รวมถึงไอคอน svg ที่กำหนดเองคุณสามารถ:

1- ไปที่http://fontawesome.io/ดาวน์โหลด zip และแตกไฟล์เช่นในเดสก์ท็อปของคุณ

2- ไปที่http://fontastic.me/ใช้อีเมลของคุณเพื่อสร้างบัญชี

3- เมื่อคุณได้เข้าสู่ระบบคลิกที่ตัวเลือกส่วนหัว: เพิ่มไอคอนเพิ่มเติม

4- เลือก SVG ของตัวอักษรที่ยอดเยี่ยมที่อยู่ใน zip ที่แตกแล้วภายในแบบอักษร

5 ทำซ้ำ procces อัพโหลดไฟล์ svg ของคุณเอง

6- Inside Home (ที่ส่วนหัวของหน้า) เลือกไอคอนที่คุณต้องการดาวน์โหลดปรับแต่งเพื่อให้ชื่อที่กำหนดเองของคุณและเลือกเผยแพร่เพื่อมีลิงค์หรือดาวน์โหลดแบบอักษรและ CSS

ขออภัยเกี่ยวกับภาษาอังกฤษของฉัน! : D