Tambahkan ikon khusus ke font yang mengagumkan

142

Saya suka font ikon Font Awesome dan ingin menggunakannya untuk sebagian besar ikon di situs saya, tetapi ada beberapa ikon svg kustom yang saya perlukan selain yang ditawarkan.

Saya perhatikan bahwa versi .svg dari Font Awesome sebagian besar terdiri dari <glyph />elemen - elemen ini :

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

Apakah efektif untuk mengambil kode ikon svg saya, menempelkannya sebagai elemen mesin terbang baru dan menetapkan karakter unicode yang tidak terpakai?

svg  webfonts  font-awesome 
— Christian Schlensker
sumber
2
apakah Anda menemukan solusi? atau Anda baru saja memilih penyumbatan lain?
— Michel Ayres
1
link untuk '.svg versi Font Awesome' tidak ditemukan. Harap perbarui.
— Yannis Dran
2
— Rimian

Jawaban:

126

Berikan Icomoon mencoba. Anda dapat mengunggah SVG Anda sendiri, menambahkannya ke perpustakaan, lalu membuat font khusus yang menggabungkan FontAwesome dengan ikon Anda sendiri.

— davidtheclark
sumber
Terima kasih :) Ini sangat membantu!
— Johnny Zhao
Layanan hebat. Terima kasih untuk itu. Menghasilkan set ikon kustom dari svgs dalam waktu singkat.
— Nodoze
Alat yang bagus. Sempurna. :)
— Christian Mark
2
Hai, saya telah membuat ikon font dengan folder yang berisi ikon svg. Tetapi nanti saya ingin menambahkan satu ikon ke itu, Apakah mungkin untuk menambahkan? atau lagi saya harus membuat dengan folder ?.
— Varadha31590
26

Di Font Awesome 5, Anda dapat membuat ikon khusus dengan data SVG Anda sendiri. Berikut adalah demo repo GitHub yang bisa Anda mainkan. Dan inilah CodePen yang menunjukkan bagaimana sesuatu yang serupa dapat dilakukan di <script>blok.

Dalam kedua kasus, ini hanya melibatkan penggunaan library.add()untuk menambahkan objek seperti ini:

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

Perhatikan bahwa elemen yang diberi label oleh komentar "data jalur svg" dalam contoh kode inilah yang akan ditetapkan sebagai nilai datribut pada <path>elemen yang merupakan turunan dari <svg>. Seperti ini (meninggalkan beberapa detail untuk kejelasan):

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

(Diadaptasi dari jawaban saya yang serupa di sini: https://stackoverflow.com/a/50338775/4642871 )

— mwilkerson.dll
sumber
Bagaimana jika kita ingin menggunakan prefiks standar, sehingga svg baru dapat masuk ke dalam website?
— Norbert Kardos
1
Anda dapat menggunakan awalan apa pun yang Anda suka. Tapi jika Anda menggunakan awalan standar ( fab, fas, far, fal), Anda akan berada pada risiko yang lebih besar dari penamaan konflik-jika tidak sekarang, maka mungkin di masa depan karena kami terus menambahkan ikon dengan mereka awalan standar. Menggunakan awalan khusus tidak akan membuat svg semakin kecil kemungkinannya untuk "cocok dengan situs web" —tetapi saya tidak yakin apa yang Anda maksud dengan frasa itu, jadi mungkin Anda bisa menjelaskannya?
— mwilkerson
Kami membutuhkan ikon merek sosial tertentu (dengan 200 juta lebih pengguna), yang sudah diminta. Kami ingin menambahkan ikon svg ini ke versi pro untuk digunakan di situs web, tanpa membuat kasus pengecualian html / css / else. Semua merek lain sudah memiliki ikon, jadi kelas hebat hadir pada elemennya (dan merek yang sebenarnya dipilih ditambahkan secara dinamis ke css)
— Norbert Kardos
1
Ya itu akan berfungsi dengan baik untuk menggunakan awalan standar untuk menambahkan ikon kustom Anda. Ingatlah bahwa jika nama ikon akhirnya sama dengan sesuatu yang kita tambahkan ke awalan itu nanti, akan ada konflik. Jadi mungkin memilih nama ikon yang tidak mungkin konflik? CodePen bercabang untuk didemonstrasikan: codepen.io/fontawesome/pen/pZWXYX
— mwilkerson
SVG saya berasal dari file adobe AI, dan memiliki banyak jalur. Hal ini mencegah saya untuk dapat menyetel parameter "d" yang ditentukan di atas dengan benar. Saya harus terlebih dahulu mengonversi file AI menjadi jalur gabungan sebelum mengekspornya sebagai SVG. Saya belajar bagaimana melakukannya di sini: graphicdesign.stackexchange.com/questions/35054/…
— Alex Standiford
21

Saya sarankan untuk menjaga ikon Anda terpisah dari FontAwesome dan membuat serta memelihara pustaka kustom Anda sendiri. Secara pribadi, menurut saya jauh lebih mudah untuk menjaga agar FontAwesome tetap terpisah jika Anda akan membuat pustaka ikon Anda sendiri. Anda kemudian dapat meminta FontAwesome dimuat ke situs Anda dari CDN dan tidak perlu khawatir untuk menjaganya tetap up-to-date.

Saat membuat ikon khusus Anda sendiri, buat setiap ikon melalui Adobe Illustrator atau perangkat lunak serupa. Setelah ikon Anda dibuat, simpan setiap ikon dalam SVGformat di komputer Anda.

Selanjutnya, kunjungi IcoMoon : http://icomoon.io , yang memiliki perangkat lunak penghasil font terbaik (menurut saya), dan gratis. IcoMoon akan memungkinkan Anda untuk mengimpor font SVG-disimpan pribadi Anda ke perpustakaan font, kemudian menghasilkan ikon mesin terbang perpustakaan kustom Anda di eot, ttf, woff, dan svg. Satu format yang tidak dihasilkan oleh IcoMoon adalah woff2.

Setelah membuat paket ikon Anda di IcoMoon , buka FontSquirrel : http://fontsquirrel.com dan gunakan pembuat font mereka. Gunakan ttffile Anda yang dibuat di IcoMoon . Dalam paket ikon yang baru dibuat, Anda sekarang akan memiliki paket ikon Anda dalam woff2format.

Pastikan file untuk eot, ttf, svg, woff, dan woff2semua nama yang sama. Anda membuat paket ikon dari dua situs web / perangkat lunak yang berbeda, dan mereka memberi nama keluaran yang dihasilkan secara berbeda.

Anda akan memiliki CSS yang dibuat untuk paket ikon Anda di kedua lokasi. Tetapi CSS yang dihasilkan di IcoMoon tidak akan menyertakan woff2format dalam @font-face {}deklarasi Anda . Pastikan untuk menambahkannya saat Anda menambahkan CSS ke proyek Anda:

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

Ingatlah bahwa Anda bisa mendapatkan nilai unicode mesin terbang dari setiap ikon dalam paket ikon Anda menggunakan perangkat lunak IcoMoon . Nilai-nilai ini dapat membantu dalam menetapkan ikon Anda melalui CSS, seperti dalam (dengan asumsi kami menggunakan yang font-familydideklarasikan dalam contoh di @font-face {...}atas):

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

Anda juga bisa mendapatkan nilai unicode mesin terbang e953jika Anda membuka svgfile yang dihasilkan font-pack di editor teks. Misalnya:

<glyph unicode="&#xe953;" glyph-name="eye" ... />
— Pegues
sumber
tidak bekerja,.,. menyelesaikan seluruh proses hanya ikon tidak muncul, bukan nomor muncul
— Inzmam ul Hassan
1
Bisakah Anda menjelaskan lebih lanjut? Saya dengan senang hati membantu Anda mengatasi masalah Anda. Apakah Anda menentukan font-family: customiconpack;dengan Anda selector:after? Izinkan saya memperbarui solusi saya sekarang untuk selector:aftercontoh kode.
— Pegues
saya mengunggah file ikon svg,. saya men-downlaoded file ,., saya memasukkan mereka ke dalam proyek menambahkan file css baru ke dalam proyek menyalin kode Anda ke dalam file mengubah kode dengan kode ikon saya ,. tidak berhasil,.
— Inzmam ul Hassan
1
Silakan bergabung dengan ruang obrolan yang saya buat ini sehingga kita dapat mendiskusikan masalah dengan lebih mudah: chat.stackoverflow.com/rooms/132402/…
— Pegues
2
Saya berkomentar di sini hanya untuk memberi tahu orang lain bahwa masalahnya adalah Anda membuat SVG di Illustrator dari PNG yang diimpor. Anda harus membuat ulang ikon Anda sebagai vektor. PNG adalah format raster dan tidak memiliki kurva vektor.
— Pegues
18

Tergantung apa yang Anda miliki. Jika ikon svg Anda hanya sebuah jalur, maka cukup mudah untuk menambahkan mesin terbang itu hanya dengan menyalin atribut 'd' ke elemen <gly” baru. Namun, jalur perlu diskalakan ke sistem koordinat font (kotak EM, yang biasanya adalah [0,0,2048,2048] - standar untuk font Truetype) dan diselaraskan dengan garis dasar yang Anda inginkan.

Tidak semua browser mendukung font svg, jadi Anda harus mengonversinya ke format lain juga jika Anda ingin itu berfungsi di mana-mana.

Fontforge dapat mengimpor file svg (pilih slot mesin terbang, File> Impor dan kemudian pilih gambar svg Anda), dan Anda kemudian dapat mengonversi ke semua format font yang relevan (svg, truetype, woff dll).

— Erik Dahlström
sumber
14

Pendekatan serupa untuk @ Samuel-bergström:

  • Unduh Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
  • Unduh FontForge http://fontforge.github.io/en-US/downloads/
  • Unduh Inkscape
  • Buka Inskscape dan buat bentuk layer tunggal sebagai ikon font baru Anda
  • Simpan file SVG, Tutup Inkscape
  • Buka FontForge (Jika Anda memiliki banyak monitor, gunakan Windows-LeftArrow, untuk memposisikan ulang karena mereka memiliki jendela java SWING aneh yang keluar dari monitor, dan memiliki masalah modal dengan popup - Saya harus memeriksa bilah tugas saya untuk beberapa)
  • File | Buka fontawesome-webfont.svg
  • File | Impor
  • Gulir ke bawah, Klik Kanan pada Ikon | Info Mesin Terbang
  • Perbarui Nama Mesin Terbang ke uniFXXX (XXX adalah sesuatu seperti 501, angka yang lebih tinggi dari Unicode tertinggi yang digunakan di FontAwesome v4.5)
  • Unicode Vlaue U + fXXX
  • Klik OK
  • File | Menyimpan
  • File | Hasilkan Font ...
  • Tutup FontForge
  • Buka proyek web Anda
  • Salin file font Anda ke folder "\ Content \ font \" (dalam proyek saya).
  • Edit "\ Content \ styles \ fa \ path.less" menjadi seperti:

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

Saya tahu ini mungkin 'kontroversial' untuk mengomentari jenis file lain, tetapi senang mendengar cara menghasilkan file .eot atau .otf di komentar.

  • dan terakhir, seperti yang Samuel sebutkan, perbarui CSS / KURANG Anda dengan:

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

— OzBob
sumber
3

Saya meneliti sedikit tentang font web SVG dan pembuatan font, menurut pendapat saya jika Anda ingin "menambahkan" font ke font yang sudah ada dan keren, Anda perlu melakukan hal berikut:

pergi ke inkscape dan buat sebuah mesin terbang, simpan sebagai SVG sehingga Anda dapat membaca kodenya, pastikan untuk menetapkan karakter unicode yang saat ini tidak digunakan sehingga tidak akan konflik dengan mesin terbang yang ada di font. ini bisa jadi sulit jadi saya pikir persetujuan sederhana yang lebih baik akan menggantikan mesin terbang yang ada dengan milik Anda (pilih saja yang tidak Anda gunakan, salin bagian pertama:

Simpan svg lalu konversikan ke font web menggunakan konverter online apa pun sehingga font web Anda akan berfungsi di semua browser.

setelah ini selesai, Anda harus memiliki SVG dengan salah satu mesin terbang diganti dalam hal ini Anda sudah selesai. jika tidak, Anda perlu membuat CSS untuk mesin terbang baru Anda, dalam hal ini coba gunakan kembali FA CSS yang ada, dan hanya tambahkan

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

Jika Anda menginginkan beberapa ikon (atau semua) dari font-awesome termasuk ikon svg kustom Anda, Anda dapat:

1- Buka http://fontawesome.io/ Unduh zip dan ekstrak-nya misalnya di Desktop Anda.

2- Buka http://fontastic.me/ gunakan email Anda untuk membuat akun.

3- Setelah Anda masuk, klik pada opsi tajuk: Tambahkan Ikon Lainnya.

4- Pilih SVG font-awesome yang terletak di zip di dalam font yang Anda ekstrak.

5- Ulangi proses mengunggah file svg Anda sendiri.

6- Inside Home (di header halaman) Pilih ikon yang ingin Anda download, sesuaikan untuk memberikan nama kustom Anda dan pilih publikasikan untuk mendapatkan link atau download font dan css.

Maaf tentang bahasa Inggris saya! : D

— CarLoOSX
sumber
Itu akan berhasil tetapi saya pikir lebih baik membuat pustaka ikon kustom Anda sendiri dan menggunakan sisi fontawesome. Ini akan memungkinkan untuk memperbarui fontawesome (dengan ikon baru).
— Guillaume Harari
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.