اگر شما یک فرانت اند کار هستید و یا قصد دارید برای خود یک وب سایت یا حتی نرم افزار طراحی کنید، بی قید و شرط باید با فونت آیکون ها آشنا باشید. این روز ها دنیای وب پر از سایت های گوناگون است اما فقط وب سایت هایی اعتماد و توجه ما را جلب می کنند که حرفه ای تر و بروز تر طراحی شده باشند و فونت آیکون ها یکی از نیاز های ضروری زیبا و حرفه ای کردن وب سایت ها هستند. علاوه بر زیبا سازی، فونت آیکون ها کمک می کنند کاربر خیلی سریع تر و با یک نگاه کلی قسمت های اصلی محتوا را برداشت کند که این باعث می شود راحت تر مطالب را دنبال کرده و توجه بیشتری کند.
در گذشته نه چندان دور، آیکون‌ها را بصورت یک فایل تصویر در طراحی استفاده می‌کردند. اما این کار چند اشکال اساسی داشت :
خب روش قبل منسوخ شده و امروزه کمتر کسی از آن استفاده می‌کند. برای حل تمام مشکل‌های گفته شده راه حلی ارائه شد به نام فونت آیکون!
حالا واقعا فونت آیکون چیست؟ فونت آیکون ها مجموعه‌ای از آیکون های متناسب با هم که بصورت برداری (Vector) طراحی شده و همه آن ها در یک فایل فونت گنجانده شده‌اند. فونت آیکون ها فقط فونت هستند. با این حال به جای داشتن حروف و اعداد، آن ها حاوی علامت ها و سمبل ها هستند. شما می توانید همان گونه که به متن های معمولی در وب استایل می دهید به آن ها نیز استایل بدهید که این ویژگی باعث محبوبیت آن ها در وب شده است.
نکته : تصاویری که بصورت برداری طراحی می‌شوند، با تغییر سایز از کیفیت آن ها کاسته نمی‌شود!
۱- فراخوانی کل آیکون ها تنها با یک درخواست!
برای استفاده از فونت آیکون تنها یک CDN یا یک فایل را در هاست خود فراخوانی می کنید و در ادامه بدون نیاز به فراخوانی دوباره، به تمام آیکون های موجود در آن مجموعه دسترسی دارید و از آن ها استفاده می‌کنید. این یعنی سرعت بیشتر.
نکته : برای استفاده از هر فونت آیکون کافیست نام آن را به صورت کلاس به تگ یا المان مورد نظر خود بدهید.
۲- امکان فراخوانی به‌وسیله CDN
فراخوانی فونت آیکون به وسیله CDN یکی از مهم ترین مزایای استفاده از آن است. CDN چیست؟ شرکت هایی مثل گوگل، مایکروسافت و… سرور‌هایی را در نقاط مختلف جهان در اختیار دارند. فرض کنید فونت آیکون ما در سرور گوگل قرار دارد و ما آن را از طریق CDN گوگل فراخوانی می‌کنیم. نه تنها ما بلکه هزاران وب سایت دیگر هم اینکار را انجام می‌دهند.
همان طور که می‌دانید وقتی یک صفحه وب را برای اولین بار مشاهده می‌کنید، برخی فایل های مربوط به آن صفحه مانند فایل های CSS، JavaScript، فونت‌ها، عکس‌ها و… توسط مرورگر شما کَش (cache) می‌شوند تا در آینده بتواند آن وب سایت را خیلی سریع تر بارگذاری کند. ( یعنی اطلاعات را از محل ذخیره‌سازی خود می‌خواند نه از سرور ).
حال به این فکر کنید که یک کاربر قبل از اینکه وارد وب سایت شما شود، وارد وب سایتی شده که از CDN گوگل برای فراخوانی Font Icon خود اقدام کرده است و آن فونت آیکون در مرورگر آن شخص کَش شده است ( که احتمال آن به شدت زیاد است ). با این فرض اگر شما هم از طریق CDN گوگل، فونت آیکون خود را فراخوانی کرده باشید، همان کاربر وقتی وارد وب سایت شما می‌شود، دیگر Font Icon از سرور بارگذاری نمی‌شود بلکه از کَش مرورگر خوانده می‌شود که این مسئله می‌تواند تاثیر بسیار خوبی در افزایش سرعت وب سایت شما داشته باشد.
۳- سهولت در تغییر سایز و رنگ آیکون
همان طور که اشاره کردیم آیکون ها به صورت برداری طراحی شده‌اند، این مسئله گویای این است که تغییر سایز آیکون بدون کوچک ترین افت کیفیت انجام می‌شود. می‌توانید برای تغییر سایز و رنگ آیکون، با آن مانند یک فونت رفتار کنید، یعنی از ویژگی های font-size و color استفاده کنید.
بطور کلی برای استفاده از یک Font Icon دو راه وجود دارد.
1- دانلود فایل‌های فونت : معمولا وقتی یک فونت آیکون را دانلود می‌کنید در آن فایل های مربوط به فونت و یک فایل CSS وجود دارد. کافیست فایل CSS آن را به پروژه خود اضافه کنید و فایل های فونت را در مکان مناسبی قرار دهید ( این مکان مناسب را می‌توانید از راهنمای نصب فونت آیکون در وب سایت رسمی‌شان متوجه شوید ).
2- استفاده از CDN : در این روش تنها کافیست یک تگ link را در عنصر head کد های قالب خود اضافه کنید. این تگ را معمولا در یک فایل راهنما یا در وب سایت آن فونت آیکون می‌توان پیدا کرد. ( البته اگر فونت آیکون موردنظر از سریق CDN هم ارائه شود ).
نکته : نحوه فراخوانی و نمایش آیکون ها در Font Icon های مختلف، متفاوت است.
شاید شما معروف ترین فونت آیکون ها نظیر Font Awesome ، Flat Icon و Material Design را بشناسید اما هنوز چندین هزار فونت آیکون رایگان برای شما موجود می باشد که تعدادی از آن ها را به شما معرفی می کنم. این آیکون ها کاملا رایگان بوده و در قالب های SVG ، Vector ، WebFont و غیره ارائه می شوند.
1- فونت آیکون Font Awesome : بدون شک وب فونت اصلی و محبوب ترین فونت آیکون می باشد. انتخاب بوت استرپ کارها و اکثر طراحان سایت، مجموعه فونت آیکون های Font Awesome می باشد. با اینکه چند سالی هست منتشر شده اما به طور گسترده به عنوان اولین انتخاب فونت آیکون های رایگان، در دنیا استفاده می شود. همه آیتم های این مجموعه از نظر سایز، رنگ، سایه، بک گراند و بسیاری ویژگی های دیگر قابل دستکاری در CSS3 می باشند.
2- فونت آیکون Google Icons : فونت آیکون Google که یکی از زیبا ترین فونت آیکون های موجود است. استفاده از این فونت بسیار ساده است. و تنها کافیست این فونت را از CDN گوگل فراخوانی کنید.
3- فونت آیکون Ionicons : فریم ورک Ionic محبوب ترین انتخاب برای برنامه نویسان Web-To-Mobile هست و تیم برنامه نویسی Ionic تصمیم گرفتند آیکون های خودشان را با عنوان مجموعه Ionicons منتشر کنند. این سری فونت آیکون ها کاملا رایگان هستند و می توانید به راحتی از طریق گیت هاب یا نسخه CDN به آن ها دسترسی داشته باشید.
4- فونت آیکون Typicons : این مجموعه به صورت کاملا رایگان بر روی گیت هاب قابل دسترسی می باشد و این بدین معنا هست که شما می توانید این فونت آیکون ها را به طور مستقیم داخل وب سایت خود داشته باشید و به صورت دلخواه آن ها را تغییر دهید. افراد کمی با این سری از فونت آیکون ها آشنا هستند اما باید بدانید که Typicons با بیش از 330 آیکون خوب طراحی شده با گوشه های گرد و حالت خطی برای هر وب سایت و نرم افزار و مهم تر از همه برای نرم افزارهای IOS مناسب می باشند.
5- فونت آیکون Captain Icon : مهم ترین نکته در رابطه با این فونت آیکون استایل هایی هست که برای فونت آیکون ها می توانید ایجاد کنید، در این مجموعه هر آیکون یک طراحی منحصر بفرد دارد و به صورت دست کشیده یا Hand Drawn هستند.
