Bosh sahifa / Sayt tayyorlash / Qanday qilib Font Awesome fontlaridan saytda foydalanish

Qanday qilib Font Awesome fontlaridan saytda foydalanish

Font Awesome fontlari bugungi kunda eng ko’p ishlatiladigan belgili font turi hisoblanadi. Uni tayyorlayotgan saytingizda juda osonlik bilan o’rnatishingiz mumkin. Fontlardan saytingizning istalgan joyida ko’rsatish esa bir qator kodni yozish bilan amalga oshirilishi mumkin. Font Awesome fontlari nafaqat saytingizga bezark beradi, balki undan foydalanishda qulaylik ham yaratishi mumkin.

Font Awesome nima ekanligini bilmaydiganlar uchun alohida aytib o’tmoqchiman: bu font o’ziga xos, turli mavzularga oid kichik belgichalar (rasmchalar)ni o’z ichiga olgan. Ularni ko’rish uchun mana bu sahifaga o’ting. Bu turdagi fontlarni brauzerlar oddiy harflar (font) sifatida qabul qiladi va ko’rsatadi. Agar saytga Font Awesome o’rnatilgan bo’lsa, uning istalgan qismida maxsus HTML kodni yozish orqali kerakli fontni ko’rsatish mumkin bo’ladi. Ushbu maqolada Font Awesome fontlarini saytga o’rnatish va ulardan foydalanish haqida tushuncha bermoqchiman.

Saytda Font Awesome maxsus HTML kodlarini yozganimizda belgili fontlarning ko’rinishi uchun avval saytimizga Font Awesomeni o’rnatib olishimiz kerak. Buni ikki xil usulda amalga oshirish mumkin:

CDNdan foydalangan holda

Menimcha, bu eng qulay usul. CDN (content delivery network – ma’lumotlar yetkazib berish tarmog’i) Font Awesomeni ko’rsatish uchun kerak bo’ladigan barcha kodlar va fontlarni o’zida saqlaydi. Siz esa saytingizning head qismida CDNdagi CSS fayliga yo’l ko’rsatasiz. Bo’ldi!

Saytingizda Font Awesome fontlarini ko’rsatish uchun quyidagi kodni saytingizning <head> va </head> teglari orasiga qo’ying:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Endi bu CSS yordamida sahifaning istalgan joyida fontlarni ko’rsatishingiz mumkin. Qaysi fontni ko’rsatmoqchi bo’lsangiz, shu fontning nomini «fa-» prefiksidan keyin yozasiz. Masalan, camera retro fontini ko’rsatamiz:

<p style="text-align: left;"><i class="fa fa-camera-retro"></i></p>

Fontlarni qanday qilib joylashtirish to’g’risida ko’proq ma’lumotni mana bu sahifadan olasiz.

Oddiy CSS yordamida

Bu usuldan foydalanish uchun Font Awesomening barcha loyiha fayllarini o’z saytingiz joylashgan serverga ko’chirishingiz kerak bo’ladi. Shundan so’ng fayllar joylashgan papka ichidagi CSS faylga yo’l ko’satasiz. Bu ham head teglari orasida yoziladi:

<p style="text-align: left;"><link rel="stylesheet" href="fontawesome/css/fayllari/papkasi/font-awesome.min.css"></p>

Font Awesomedan tashqari Fontello, Glyphicon, Typicon kabi fontlar bor. Ulardan unumli foydalangan holda sayt tayyorlang!

Abituriyentlar uchun test formulalari

Javob qoldirish

Email manzilingiz hech kimga ko'rsatilmaydi.Majburiy bo'limlar belgilangan *

*