7 نکته راهنما در مورد آیکون وب ، موارد استفاده و مزایا را تعیین می کند



آیا در مورد استفاده از نماد تنظیم شده برای وب سایت خود تعجب می کنید و کدام یک را انتخاب کنید؟ این نکات متخصص فقط ممکن است شما را در مورد آنچه بسیاری از توسعه دهندگان وب حرفه ای از قبل می دانند متقاعد کند: جستجوی آیکون ها از مجموعه آیکون های موجود بسیار ساده تر از یافتن آیکون های یک به یک و یافتن راهی برای ایجاد یکپارچه در کنار یکدیگر است.

ما از جامعه خواسته ایم بهترین راهنمایی های خود را در مورد استفاده از مجموعه آیکون ها داشته باشیم ، و بسیاری از آنها با استفاده از مجموعه آیکون های معروف Font Awesome موافق هستند ، اما با این وجود این تنها نماد مجموعه موجود در بازار نیست.

از کدام مجموعه نمادها استفاده می کنید؟ در نظرات به ما اطلاع دهید!

 آیا از یک نماد خاص برای وب سایت خود استفاده می کنید؟ آیا برای استفاده خاص (مثلاً با Shopify ، برای یک خبرنامه و ...) از Font Awesome استفاده می کنید؟ اگر چنین است ، چرا از آن استفاده می کنید ، و تجربه شما با مجموعه آیکون چیست؟ آیا از CDN آنها استفاده کرده اید ، آیا هیچ گونه پیشرفتی در استفاده خود مشاهده کرده اید؟

جف روزچر: این یک ظاهر طراحی زیبا و ساده را اضافه می کند که مشتریان مدرن و جذاب به نظر می رسند

ما در eWorkOrders.com از Font Awesome استفاده می کنیم. این بخشی از هر دو سایت بازاریابی و نرم افزار ما به عنوان خدمات (SAAS) ارائه شده ، یک سیستم مدیریت نگهداری رایانه ای (CMMS) است. در سایت بازاریابی ما ، یک ظاهر طراحی زیبا و ساده را اضافه می کند که مشتریان آینده نگر مدرن و جذاب به نظر می رسند. ما مرزها و رویدادهای جادویی ماوس اضافه کرده ایم تا آنها را تعاملی تر و جالب تر کنیم. برای مشتریان ما ، از نمادهای Font Awesome به عنوان نشانه بصری در داخل فیلدهای ورودی استفاده می شود تا به شناسایی چه نوع داده ای وارد شود ، مانند نماد تقویم در یک زمینه تاریخ ، یک پاکت در یک زمینه آدرس ایمیل یا یک نماد تلفن در زمینه شماره تلفن آنها در دکمه های کاربردی مانند ویرایش ، کپی و چاپ استفاده می شوند.

از این نمادها برای ارائه اطلاعات بصری سریع در مورد داده ها مانند نماد تعجب قرمز در کنار دستور کار دیررس یا هنگامی که چیزی نیاز به توجه دارد استفاده می شود. آنها در چند مکان دیگر نیز فقط برای زیبا تر شدن برنامه هستند ..

قلم عالی بسیار جذاب بوده است! CDN آنها سریع است و برای هر نوع آیکون مورد نیاز ما گزینه های بسیاری وجود دارد. ما هیچ وقت نا امید نشده ایم.

جف رئیس eWorkOrders.com است. eWorkOrders CMMS مبتنی بر وب آسان است که به مشتریان کمک می کند تا درخواست های خدمات ، سفارشات کار ، دارایی ، نگهداری پیشگیرانه و موارد دیگر را در مدیریت خود مدیریت کنند.
جف رئیس eWorkOrders.com است. eWorkOrders CMMS مبتنی بر وب آسان است که به مشتریان کمک می کند تا درخواست های خدمات ، سفارشات کار ، دارایی ، نگهداری پیشگیرانه و موارد دیگر را در مدیریت خود مدیریت کنند.

راشل فولی: روشی مناسب برای دسترسی به یک کتابخانه عظیم آیکون با سهولت

در نقشه من مشتریان من ، ما به طور کامل به قلم عالی برای نمادنگاری خود در تمام کانال های بازاریابی و محصول ما از جمله محصولات ما متکی هستیم:

  • سایت اینترنتی
  • ایمیل
  • رسانه های اجتماعی
  • گرافیک های سفارشی
  • برنامه تلفن همراه
  • برنامه وب

ما از Font Awesome استفاده می کنیم زیرا این یک روش مقرون به صرفه برای دسترسی به یک کتابخانه عظیم آیکون با سهولت است. سبک بیشتر به سمت بازیگوش است که با مارک ما مطابقت دارد. به علاوه ، توانایی ما برای استفاده از وزن ها و سبک های مختلف آیکون ها به ما آزادی می دهد.

ما از CDN برای برنامه های خود استفاده می کنیم که به شما امکان می دهد احساس کاملاً مداوم در سراسر تجربه کاربر محصول داشته باشید. به علاوه - هنگام نیاز به بروزرسانی بسیار ساده است. با استفاده از مواد بازاریابی ، ما کمی انعطاف پذیرتر هستیم و از ترکیبی از CDN ، نصب محلی و نسخه برداری خود استفاده می کنیم.

FA از زمانی که در ژانویه به طور کامل پذیرفته ایم ، همیشه برای ما قابل اعتماد بوده است.

راشل یک طراح وب و مبتنی بر NYC مبتنی بر NYC است که دارای انگیزه ای برای تقویت مارک های در حال رشد B2B و ایجاد موفقیت در بازاریابی طولانی مدت از طریق استراتژی SEO است. وی در حال حاضر در نقشه مشتریان من ، یک شرکت نرم افزاری فروش B2B در حال ایجاد راه حل هایی برای تیم های فروش میدانی است.
راشل یک طراح وب و مبتنی بر NYC مبتنی بر NYC است که دارای انگیزه ای برای تقویت مارک های در حال رشد B2B و ایجاد موفقیت در بازاریابی طولانی مدت از طریق استراتژی SEO است. وی در حال حاضر در نقشه مشتریان من ، یک شرکت نرم افزاری فروش B2B در حال ایجاد راه حل هایی برای تیم های فروش میدانی است.

اندرو رودیتزر: همانطور که Font Awesome به روز شد ، ما نیز چنین کردیم

Font Awesome is used on all our sites since the dawn of time. When we first started working with Font Awesome, it was mainly used for their رسانه های اجتماعی Icons. As Font Awesome upgraded, so did we. Not only are their phone icons fantastic, we enjoy the comical icons that they offer. As of recent, Font Awesome announced their version 6 icons. To us, this shows that Font Awesome cares for their users, and want to keep their system up to date with recent code.

Font Awesome اکنون طیف گسترده ای از آیکون ها را انتخاب کرده است. ما می دانیم که این انعطاف پذیری از مرحله طراحی تا مرحله توسعه برای ما مفید است. برای Font Awesome ، پلتفرم آنها دو گزینه برای کاربران خود ارائه می دهد. گزینه های اول یک سرویس رایگان است که 1،588 آیکون رایگان را انتخاب می کند. گزینه دوم یک عضویت Pro است که 7،842 آیکون ارائه می دهد. این شرکت همچنین آنچه را که ما یک صفحه تقلب Icon می نامیم ، دارد. این لیست تمام نمادهای آنها را که Font Awesome ارائه می دهد ، نشان می دهد که اگر بخشی از بسته رایگان یا بسته حرفه ای هستند ، به ما اطلاع می دهند.

علاوه بر این ، Font Awesome همچنین گزینه ای را برای برداشتن کد آنها از CDN ارائه می دهد. ما به شدت توصیه می کنیم مسیر آنها را طی کنید. CDN آنها زمان پاسخگویی سریع دارد و ما بین سایت و پلتفرم آنها تاخیر نداریم.

اندرو رودیتسر ، هماهنگ كننده فناوری سرب
اندرو رودیتسر ، هماهنگ كننده فناوری سرب

جف رومرو: باعث می شود سرعت صفحه بسیار سریعتر شود

ما وب سایتهای سفارشی را در وردپرس برای مشتریهای تجاری کوچک تا متوسط ​​توسعه می دهیم. ما از تصاویر تاریخی برای نمایش نمادهای مختلف در وب سایت های خود اعم از پروفایل رسانه های اجتماعی گرفته تا نمادهای تلفنی و ایمیل استفاده کرده ایم. فرآیند استفاده از یک تصویر برای آیکون ها نیاز به یافتن مجموعه ای ثابت از آیکون ها ، بارگذاری آنها و سپس تغییر اندازه آنها برای اطمینان از مناسب بودن سایت دارد.

اگرچه این یک فایل تصویری کوچک است ، اما گرفتن یک مجموعه ثابت از آیکون ها و مطابقت آنها با الگوی سایت کمی فرایند است. اکنون با استفاده از افزونه Font Awesome و افزونه وردپرس ، می توان آیکون ها را با مجموعه رسانه ای مداوم جایگزین کرد که به سادگی نیاز به کپی / چسباندن یک خط HTML دارد. حتی بهتر ، نمادها را با مقدار کمی CSS تغییر می دهیم (با استفاده از خاصیت اندازه قلم). نمادها بهتر از یک نماد مبتنی بر تصویر هستند و در دستگاه های تلفن همراه کاملاً قابل مشاهده هستند. سرانجام ، از آنجا که این یک خط HTML است نه یک فایل تصویری ، باعث می شود سرعت صفحه بسیار سریع تر شود.

جف رومرو بنیانگذار Octiv Digital ، یک آژانس بازاریابی دیجیتالی است که در استراتژی سئو محلی و سازمانی ، مدیریت تبلیغات پرداخت هر کلیک ، طراحی وب / توسعه و خدمات تجزیه و تحلیل بازاریابی تخصص دارد.
جف رومرو بنیانگذار Octiv Digital ، یک آژانس بازاریابی دیجیتالی است که در استراتژی سئو محلی و سازمانی ، مدیریت تبلیغات پرداخت هر کلیک ، طراحی وب / توسعه و خدمات تجزیه و تحلیل بازاریابی تخصص دارد.

ونس: خصوصاً خوب است وقتی در تیم خود طراح ندارید

من به عنوان یک توسعه دهنده وب ، از Font Awesome به عنوان یک راه حل سریع برای تعداد زیادی از نمادهای زیبا استفاده می کنم. گفته می شود ، Font Awesome بسیار مناسب است وقتی طراح در تیم توسعه خود ندارید. این برای تهیه افزونه های وردپرس مفید است زیرا توسعه دهندگان می توانند با استفاده از CDN های Font Awesome ، هیچ وقت آنها را در پلاگین های خود جاسازی نکنند.

تجربه من با Font Awesome تاکنون خوب است. اما این بدان معنی نیست که اشکالاتی ندارد. یکی از اشکالات بارز سرعت بارگذاری صفحه (عملکرد) است. از آنجا که این یک راه حل سریع است ، شما مجبورید حتی اگر فقط از چند آیکون استفاده می کنید ، مجموعه ای از آیکون ها را تعبیه کنید. این می تواند سرعت بارگذاری وب سایت و نمرات Google Page Speed ​​(PSI) را کاهش دهد.

Vance ، یک توسعه دهنده وب و یک مالک وب.
Vance ، یک توسعه دهنده وب و یک مالک وب.

سانی اشلی: ساده ، تمیز و فوراً برای بازدید کنندگان جدید قابل تشخیص است

ما از نمادهای Font Awesome در صفحه وب سایت خود استفاده می کنیم. به طور خاص ، ما از آیکون های فیس بوک ، توییتر و لینکدین برای مرجع کانال های رسانه های اجتماعی خود استفاده می کنیم. آنها برای بازدید کنندگان جدید ساده ، تمیز و فوراً قابل تشخیص هستند. همانطور که سایر کاربران Font Awesome می دانند ، پیکربندی آنها نیز بسیار سریع و آسان انجام شد.

سانی اشلی ، بنیانگذار و مدیر عامل شرکت Autoshopinvoice. Autoshopinvoice نرم افزار مدیریت فروشگاه را برای فروشگاه ها و گاراژهای مستقل تعمیر اتومبیل فراهم می کند.
سانی اشلی ، بنیانگذار و مدیر عامل شرکت Autoshopinvoice. Autoshopinvoice نرم افزار مدیریت فروشگاه را برای فروشگاه ها و گاراژهای مستقل تعمیر اتومبیل فراهم می کند.

Burak Ozdemir: نمادهای پرهای باعث ایجاد اندازه بیش از حد DOM نمی شوند

Feather Icons مجموعه ای از آیکون های منبع باز قابل خواندن و بصری است که توسط کول Bemis طراحی و نگهداری شده است. از ژوئن سال 2020 ، بیش از 280 نماد در دسترس است. تمام نمادهای ارائه شده توسط Feather Icons دارای مجوز MIT هستند و به صورت جداگانه به صورت فایلهای SVG قابل بارگیری هستند. قبل از بارگیری آنها می توانید اندازه آیکون ، رنگ سکته مغزی آیکون و عرض سکته مغزی را در وب سایت Feather Icon تنظیم کنید.

اگر یک توسعه دهنده هستید یا می دانید چگونه می توانید برخی از کارهای اصلی را انجام دهید ، می تواند گزینه مناسبی برای وب سایت یا پروژه شما باشد. از آنجا که این نمادهای سبک نیز می توانند با یک کتابخانه جاوا اسکریپت مدولار ارائه شوند ، آنها باعث ایجاد اندازه بیش از حد DOM نمی شوند ، متریک که می تواند به عملکرد صفحه وب شما آسیب برساند. بنابراین ، با استفاده از نمادهای پر (Feather Icons) می توانید سرعت بارگذاری صفحه را در مقایسه با سایر بسته های موجود در بازار پایین بیاورید. تنها نکته منفی استفاده از این مجموعه آیکون این است که شما نمی توانید بیشتر نمادهای مارک را پیدا کنید.

نمادهای پر
Burak Ozdemir یک توسعه دهنده وب از ترکیه است. وی در ایجاد برنامه های مبتنی بر وب تخصص دارد.
Burak Ozdemir یک توسعه دهنده وب از ترکیه است. وی در ایجاد برنامه های مبتنی بر وب تخصص دارد.

Michel Pinson
درباره نویسنده - Michel Pinson
میشل پینسون علاقه مندان به سفر و خالق محتوا است. وی با ادغام اشتیاق به آموزش و اکتشاف ، وی در به اشتراک گذاشتن دانش و الهام بخشیدن به دیگران از طریق فریب دادن محتوای آموزشی متعهد شد. با توانمندسازی افراد با تخصص جهانی و احساس سرگردانی ، جهان را به هم نزدیک می کند.




نظرات (0)

پیام بگذارید