Harika yazı tipine özel simgeler ekleme

Font Awesome simge yazı tipini seviyorum ve sitemdeki simgelerin çoğunda kullanmak istiyorum, ancak sunulanlara ek olarak ihtiyacım olan birkaç özel svg simgesi var.

Font Awesome'in .svg sürümünün çoğunlukla şu <glyph />öğelerden oluştuğunu fark ettim :

...
<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 simge kodumu almak, yeni bir glif öğesi olarak yapıştırmak ve kullanılmayan bir unicode karakter atamak etkili olur mu?

Ver Icomoon bir deneyin. Kendi SVG'lerinizi yükleyebilir, bunları kütüphaneye ekleyebilir ve ardından FontAwesome'i kendi simgelerinizle birleştiren özel bir yazı tipi oluşturabilirsiniz.

Fontcustom'e bir şans verebilirsiniz , svg dosyalarından kendi yazı tipinizi oluşturur.

Font Awesome 5'te kendi SVG verilerinizle özel simgeler oluşturabilirsiniz. İşte oynayabileceğiniz bir demo GitHub repo . Ve burada benzer bir şeyin <script>bloklar halinde nasıl yapılabileceğini gösteren bir CodePen .

Her iki durumda da, bunun library.add()gibi bir nesne eklemek için kullanmayı içerir :

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

Kod örneğindeki "svg path data" yorumu tarafından etiketlenen öğenin, öğesinin alt öğesi olan dbir <path>öğede özniteliğin değeri olarak atanacağını unutmayın <svg>. Bunun gibi (netlik için bazı ayrıntıları dışarıda bırakarak):

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

(Buradaki benzer cevabımdan uyarlandı: https://stackoverflow.com/a/50338775/4642871 )

Simgelerinizi FontAwesome'ten ayrı tutmanızı ve kendi özel kitaplığınızı oluşturmanızı ve bakımını yapmanızı öneririm . Şahsen, kendi simge kitaplığınızı oluşturacaksanız FontAwesome'i ayrı tutmanın çok daha kolay olduğunu düşünüyorum . Daha sonra FontAwesome'in bir CDN'den sitenize yüklenmesini sağlayabilirsiniz ve onu güncel tutmak için asla endişelenmenize gerek yoktur.

Kendi özel simgelerinizi oluştururken, her simgeyi Adobe Illustrator veya benzeri bir yazılımla oluşturun. Simgeleriniz oluşturulduktan sonra, her birini ayrı ayrı SVGbilgisayarınıza kaydedin.

Daha sonra, üzerine üzerine kafa IcoMoon : http://icomoon.io , (Bence) en iyi yazı üreten yazılım vardır ve ücretsiz. IcoMoon daki özel simge glif kütüphanesi sonra, bir yazı tipi kütüphaneye bireysel svg kaydedilen fontlar içe oluşturmasını sağlar eot, ttf, woff, ve svg. Bir biçim IcoMoon oluşturmaz olduğunu woff2.

Adresinden simge paketini oluşturduktan sonra IcoMoon , sından FontSquirrel : http://fontsquirrel.com ve onların yazı jeneratör kullanın. IcoMoon'dattf oluşturulan dosyanızı kullanın . Oluşturulan yeni oluşturulan simge paketinde, artık simge paketinizi biçimlendireceksiniz.woff2

İçin emin dosyaları olun eot, ttf, svg, woff, ve woff2hepsi aynı adı vardır. İki farklı web sitesinden / yazılımdan bir simge paketi oluşturuyorsunuz ve oluşturulan çıktılarını farklı adlandırıyorlar.

Her iki konumda simge paketiniz için CSS oluşturulur. Ancak IcoMoon'da oluşturulan CSS woff2, @font-face {}beyanınıza formatı dahil etmeyecektir . CSS'nizi projenize eklerken şunu eklediğinizden emin olun:

@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 yazılımını kullanarak simge paketinizdeki her simgenin glif unicode değerlerini alabileceğinizi unutmayın . Bu değerler, simgelerinizi ( yukarıdaki font-familyörnekte @font-face {...}belirtilen şekilde kullandığımızı varsayarak) CSS yoluyla atamanıza yardımcı olabilir :

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

e953Yazı tipi paketi tarafından oluşturulan svgdosyayı bir metin düzenleyicisinde açarsanız glif unicode değerini de alabilirsiniz . Örneğin:

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

Neye sahip olduğunuza bağlı. Svg simgeniz sadece bir yolsa, sadece 'd' niteliğini yeni bir <glif> öğesine kopyalayarak bu glifi eklemek yeterince kolaydır. Bununla birlikte, yolun yazı tipinin koordinat sistemine (genellikle [0,0,2048,2048] - Truetype yazı tipleri için standart) olan EM-kare) ölçeklendirilmesi ve istediğiniz satır taban çizgisiyle hizalanması gerekir.

Bununla birlikte, tüm tarayıcılar svg yazı tiplerini desteklemez, bu nedenle her yerde çalışmasını istiyorsanız onu diğer biçimlere de dönüştürmeniz gerekir.

Fontforge , svg dosyalarını içe aktarabilir (bir glif yuvası, Dosya> İçe Aktar ve ardından svg görüntünüzü seçebilir) ve daha sonra ilgili tüm yazı tipi biçimlerine (svg, truetype, woff vb.) Dönüştürebilirsiniz.

@ Samuel-bergström'e benzer yaklaşım:

• Fontawesome SVG'yi indirin https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
• FontForge'u İndirin http://fontforge.github.io/en-US/downloads/
• Inkscape indir
• Inskscape'i açın ve yeni yazı tipi simgeniz olarak tek bir katman şekli oluşturun
• SVG dosyasını kaydet, Inkscape'i kapat
• FontForge'u açın (Birden çok monitörünüz varsa, Windows-LeftArrow kullanın, monitörden çıkan garip SWING java pencereleri olduğu ve pop-up'larda modal sorunları olduğu için yeniden konumlandırmak için - görev çubuğumu bazıları için kontrol etmek zorunda kaldım)
• Dosya | Fontawesome-webfont.svg dosyasını açın
• Dosya | İthalat
• Aşağıya doğru kaydırın, Simgeye Sağ Tıklayın | Glif Bilgisi
• Glif Adını uniFXXX olarak güncelleyin (XXX, 501 gibi bir şeydir, FontAwesome'in v4.5 sürümünde kullanılan en yüksek Unicode'dan daha yüksek bir sayıdır)
• Unicode Vlaue U + fXXX
• Tamam'ı tıklayın
• Dosya | Kayıt etmek
• Dosya | Yazı Tipi Oluştur ...
• FontForge'u Kapat
• Web projenizi açın
• Yazı tipi dosyalarınızı (projemde) "\ Content \ fonts \" klasörüne kopyalayın.
• "\ Content \ styles \ fa \ path.less" dosyasını aşağıdaki gibi düzenleyin:

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

Diğer dosya türlerini yorumlamanın 'tartışmalı' olabileceğini biliyorum, ancak yorumlarda .eot veya .otf dosyalarını oluşturmayı duymaktan mutluluk duyuyorum.

• ve son olarak Samuel'in de belirttiği gibi CSS / LESS'inizi şu şekilde güncelleyin:

  .fa-XXX: {content: "\ f501" den önce; }

SVG web yazı tiplerini ve yazı tipi oluşturmayı biraz araştırdım, eğer font-awesome zaten mevcut yazı tipine yazı tiplerini "eklemek" istiyorsanız, aşağıdakileri yapmanız gerekir:

inkscape'e gidin ve bir glif oluşturun, SVG olarak kaydedin, böylece kodu okuyabilir, ona şu anda kullanılmayan bir unicode karakter atadığınızdan emin olun, böylece yazı tipindeki mevcut gliflerden herhangi biriyle çakışmaz. Bu zor olabilir, bu yüzden daha iyi bir daha basit bir onaylama mevcut bir glifin kendi ile değiştirileceğini düşünür (sadece kullanmadığınız birini seçin, ilk kısmı kopyalayın:

SVG'yi kaydedin ve daha sonra herhangi bir çevrimiçi dönüştürücü kullanarak web yazı tipine dönüştürün, böylece web yazı tipiniz tüm tarayıcılarda çalışır.

bu yapıldıktan sonra, gliflerden birinin değiştirildiği bir SVG'ye sahip olmalısınız, bu durumda işiniz bitmiştir. yeni glifiniz için CSS oluşturmanız gerekiyorsa, bu durumda mevcut CSS'leri FA'ları yeniden kullanmayı deneyin ve yalnızca

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

Özel svg simgeleri de dahil olmak üzere font-awesome'den bazı simgeler (veya tümü) istiyorsanız:

1- http://fontawesome.io/ adresine gidin. Zip dosyasını indirin ve örneğin Masaüstünüze çıkartın.

2- Bir hesap oluşturmak için http://fontastic.me/ adresine e-posta gönderin.

3- Giriş yaptıktan sonra başlık seçeneğine tıklayın: Daha Fazla Simge Ekle.

4- Çıkarılan zip içindeki fontlarda bulunan font-awesome SVG'sini seçin.

5- Kendi svg dosyalarınızı yükleyerek işlemleri tekrarlayın.

6- İç Ev (sayfanın başlığında) İndirmek istediğiniz simgeleri seçin, özel adlarınızı vermek için bunları özelleştirin ve bir bağlantıya sahip olmak için yayınla'yı seçin veya yazı tiplerini ve css'i indirin.

İngilizcem için kusura bakma ! : D