.jpg)
فونت اوسام
·
1401/9/28 12:39
·
سلام، در این نوشته به نحوه استفاده از فوت اوسام می پردازیم.
فونت اوسام چیست؟
فونت اوسام مجموعه نماد های مقیاس پذیری است که برای طراحی وب کاربرد دارد. این نماد ها قابل تغییر رنگ بوده و با اضافه کردن کد رنگ رنگ آن به رنگ دلخواه تغییر می کند. (در سی اس اس) و همچنین قابل تغییر اندازه است و وقتی کاربر در صفحه بزرگ نمایی می کند، کیفیت آن کاهش نمی یابد و با همان کیفیت باقی می ماند.
نحوه استفاده از فوت اوسام
برای استفاده از این فونت ابتدا نشانی اینترنتی فایل آن را در اینترنت باشد، لازم داریم. می توانیم آن را از مجموعه کتابخانه های کلود فلر که سریع بارگیری می شود و همیشه در دسترس است، استفاده کنیم،یا اینکه فایل آن را بارگیری و بر روی میزبانی وب(هاست) بارگذاری کنیم. بعد نوبت به لینک کردن فایل به صفحه وب می رسد که به شکل زیر است:
"link rel="stylesheet" href="Lib link>
در کد بالا به جای Lib link ، لینک (پیوند) کتابخانه را قرار دهید و این کد را باید در عنصر (تگ) head قرار دهید.
انتخاب شکل ها از فونت اوسام
برای انتخاب شکل ها با فونت اوسام باید به عناصر (تگ) های HTML مانند
کلاس ها به صورت fa-apple مربوط به سیب و fa-car مربوط به ماشین می شود.
در نمونه هایی می بینید:
<"li class="fa fa-home> خانه
<"div class="fa fa-book> کتاب
<"li class="fa fa-pencil> مداد
بدین ترتیب اشکال ساخته می شود.
رنگ دهی به اشکال در فونت اوسام
همان طور که در بالا گفته شد برای رنگ دهی به نماد ها از کد های رنگی (Hex،RGB و...) استفاده می شود. در مثال های زیر بیشتر با آن آشنا می شویم:
HTML:
<"li class="fa fa-apple sib>
CSS:
.sib{
color:#e8456f
}
همان طور که مشاهده کردید کد هگزاد سیمال به ویژگی رنگ اضافه شد.
امیدوارم از این آموزش لذت برده باشید. اگر این نوشته مشکل دارد یا سوال و دیدگاهی داشتید، در پایین مطرح بفرمایید.
با تشکر 🙏
