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="" 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="" 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="" 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
sumber
Jawaban:
Berikan Icomoon mencoba. Anda dapat mengunggah SVG Anda sendiri, menambahkannya ke perpustakaan, lalu membuat font khusus yang menggabungkan FontAwesome dengan ikon Anda sendiri.
sumber
Anda bisa mencoba fontcustom , itu membuat font Anda sendiri dari file svg.
sumber
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
d
atribut 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 )
sumber
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?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
SVG
format 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
, dansvg
. Satu format yang tidak dihasilkan oleh IcoMoon adalahwoff2
.Setelah membuat paket ikon Anda di IcoMoon , buka FontSquirrel : http://fontsquirrel.com dan gunakan pembuat font mereka. Gunakan
ttf
file Anda yang dibuat di IcoMoon . Dalam paket ikon yang baru dibuat, Anda sekarang akan memiliki paket ikon Anda dalamwoff2
format.Pastikan file untuk
eot
,ttf
,svg
,woff
, danwoff2
semua 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
woff2
format 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-family
dideklarasikan dalam contoh di@font-face {...}
atas):selector:after { font-family: 'customiconpackname'; content: '\e953'; }
Anda juga bisa mendapatkan nilai unicode mesin terbang
e953
jika Anda membukasvg
file yang dihasilkan font-pack di editor teks. Misalnya:<glyph unicode="" glyph-name="eye" ... />
sumber
font-family: customiconpack;
dengan Andaselector:after
? Izinkan saya memperbarui solusi saya sekarang untukselector:after
contoh kode.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).
sumber
Pendekatan serupa untuk @ Samuel-bergström:
@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; }
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"; }
sumber
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) >}
sumber
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
sumber