در فضای اینترنت کمتر وب سایت یا اپلیکیشنی را پیدا می کنید که در رابط کاربری آن از آیکون استفاده نشده باشد. آیکون ها یکی از پر استفاده ترین عناصر در طراحی گرافیک و طراحی وبسایت هستند. از این رو برنامه نویسان فرانت اند در طراحی و پیاده سازی وبسایت و وب اپلیکیشن ها، از آیکون ها استفاده می نمایند. در این مقاله با مفهوم و مزایای استفاده از فونت آیکون ها بیشتر آشنا می شویم، با من همراه باشید.
فهرست مطالب
فونت آیکون چیست؟
آیکون یا فونت آیکون؟
مزایای فونت آیکون
- فراخوانی کل آیکون ها با یک درخواست!
- کیفیت ثابت و بالا
- راحت بودن تغییر اندازه و رنگ آیکون ها
معایب فونت آیکون ها
نحوه استفاده از فونت آیکون ها
- دانلود و قرار دادن فونت آیکون در پروژه
- استفاده از CDN
به طور کلی به مجموعه ای از آیکون ها که به صورت برداری ایجاد شده اند و در یک مجموعه قرار می گیرند و با استفاده از دستورات خاصی توسط برنامه نویسان فرانت اند در طراحی رابط کاربری وبسایت ها و اپلیکیشن ها استفاده می شود، فونت آیکون گفته می شود. شاید برای شما سوال باشد که فونت آیکون را می توان در طراحی گرافیکی (مانند بنر و کارت ویزیت و پوستر و...) استفاده کرد؟ پاسخ این سوال، خیر می باشد. فونت آیکون ها برای حل مشکلات استفاده آیکون در وبسایت ها و اپلیکیشن ها ایجاد شده اند، البته شما می توانید این آیکون ها را از سایت ارائه دهنده فونت آیکون به صورت تکی دانلود و استفاده نمائید.
در گذشته برنامه نویسان فرانت اند باید هر آیکون را به صورت تصویر مجزا به پروژه خود اضافه و از آن استفاده می کردند، این کار محدودیت هایی مانند بالا رفتن حجم صفحه، ثابت بودن رنگ بندی را برای برنامه نویسان ایجاد می کرد. در پروژه های کوچک با تعداد آیکون پایین شاید مشکلی ایجاد نشود اما در پروژه هایی که تعداد آیکون ها زیاد باشد و بخواهیم مثلا رنگ بندی وب سایت یا اپلیکشن را تغییر دهیم، نیاز است که رنگ تک تک آیکون ها را تغییر دهیم که کاری طاقت فرسا محسوب می شود اما با آمدن فونت آیکون ها، مجموعه ای از آیکون را با افزودن یک فایل به پروژه خود اضافه می کنیم و با این فونت آیکون ها، مانند فونت رفتار می شود و به راحتی با یک خط کد می توانیم رنگ و اندازه تمامی فونت های استفاده شده در وبسایت یا اپلیکیشن را تغییر دهیم.
امروزه کمتر کسی از آیکون ها به صورت تصویر استفاده می کند و برنامه نویسان هم تمایل بیشتری به استفاده از فونت آیکون ها دارند. در ادامه به برخی از مزایای فونت آیکون ها اشاره می کنیم.
همان طور که در بالا اشاره شد، مثل گذشته نیازی نیست که چنذین درخواست برای دریافت تصاویر آیکون داشته باشیم و از انجایی که مجموعه ای از آیکون ها در یک فایل یا CDN قرار دارند، فقط یک درخواست برای دریافت تمامی آیکون ها مورد نیاز است.
برای آشنایی بیشتر با مفهوم CDN اینجا کلیک کنید.
وبسایت های به صورت کلی هر چه تعداد درخواست کمتری به سرور ارسال کنند، سرعت بالاتری خواهند داشت و با توجه به گفته های بالا، برای دریافت تمامی آیکون ها ما به یک درخواست بیشتر نیاز نداریم و در نتیجه سرعت بارگذاری سایت ما افزایش پیدا میکند.
از آنجایی که این آیکون ها به صورت برداری طراحی می شوند، با تغییر اندازه آیکون ها کیفیت ثابت می ماند و افت کیفیت نخواهیم داشت. به بیان ساده کیفیت آیکون ها وابسته به سایز آیکون نمی باشد.
به این نکته در بالا هم اشاره شد، فونت آیکون ها رفتاری مانند فونت دارند و با تغییر ویژگی color می توانیم رنگ آیکون ها را تغییر دهیم و با استفاده از ویژگی فونت سایز می توانیم اندازه آیکون ها را تغییر دهیم. البته در فایل این فونت آیکون ها کلاس هایی تعبیه شده است که با اختصاص دادن این کلاس ها به تگ آیکون مورد نظر می توانیم اندازه این آیکون ها را تغییر دهیم.
برای فونت آیکن ها معایبی هم در نظر می گیرند که به صورت موردی به این موارد اشاره می کنم. البته به نظر من معایبی که بیان می شود خیلی جدی نیستند که باعث شود از فونت آیکون ها استفاده نکنیم.
به صورت کلی برای استفاده از فونت آیکون ها دو روش وجود دارد، روش اول دانلود مجموعه فونت و قرار دادن آن ها در پروژه. روش دوم استفاده از CDN (توجه:ممکن است بعضی از ارائه دهندگان فونت آیکون ها از این روش پشتیبانی نکنند).
در این روش به سایت ارائه دهنده فونت آیکون مراجعه می کنیم و فایل فونت آیکون را دانود می کنیم. بعد از اینکه این فایل را از حالت فشرده خارج کردیم، فونت های موجود را در پوشه فونت های پروژه قرار می دهیم و معمولا یک فایل Css هم وجود دارد که در کنار فایل های Css پروژه قرار می دهیم و این فایل را در قسمت head قالب خود فراخوانی می کنیم. در سایت ارائه دهنده فونت آیکون می توانیم فونت های موجود را تماشا و آیکون های موردنظر خود را انتخاب نمائیم و در پروژه خود از آنها استفاده نمائیم.
در این روش کافیست که یک تگ لینک (لینک) را در قسمت head قالب خود اضافه کنیم، این تگ را می توانیم از سایت ارائه دهنده فونت آیکون دریافت نمائیم.
از فونت آیکون های محبوب می توان به Font Awesome و Line Icons و Material icons اشاره کرد. البته فونت آیکون های متنوعی برای انواع کتابخانه ها،فریم ورک ها و زبان های برنامه نویسی وب وجود دارد که با جستجو در موتور جستجوی گوگل به راحتی می توانید این فونت آیکون ها را پیدا نمائید و از آنها استفاده نمائید.
برای کسب اطلاعات بیشتر درباره فونت آیکون ها و نحوه استفاده و آیکون های موجود، توصیه می شود به سایت ارائه دهنده فونت آیکون مراجعه نمائید.
امیدوارم این مطلب براتون مفید بوده باشه. شما از چه فونت آیکون هایی استفاده می کنید؟
