آیکون های سبک تر از بوت استرپ
سلام
موردی مناسب برای آیکون به جز بوت استرپ (رایگان) که سبک باشه می شناسید ؟
خودم موارد دیگر رو تست کردم لطفا مواردی که کمتر باهاش برخورد داریم رو معرفی کنید
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام
یه راه دیگه هست می تونید آیکن رو به صورت base64 قرار بدید، چون به صورت باینری encode میشه سرعت بارگذاری در این حالت بیشتره.
اینجا می تونید فایل رو تبدیل کنید.
سلام من خودم به شخصه fontawesome رو خیلی دوست دارم. ( البته فکر کنم کمی سنگین باشه) این سایت هم ایکون های خوبی رو گفته
چون حجم مسئله اصلی تون هستش، این منبع براتون سودمند هستش:
https://ionic.io/ionicons
می تونید شکل هایی که توی پروژه تون استفاده شده رو انتخاب کنید، و فقط همون هارو شامل بشه. بر همین اساس شکل اضافه ای ندارید و حداقل حجم رو در دسترس دارید.
سلام
یه راه دیگه هست می تونید آیکن رو به صورت base64 قرار بدید، چون به صورت باینری encode میشه سرعت بارگذاری در این حالت بیشتره.
اینجا می تونید فایل رو تبدیل کنید.
من یه روش پیدا کردم برای استفاده از آیکنهای svg نه بصورت پکیج ولی بصورت خیلی سااااااده که کدهات زشت نشه
خواستین بگید اینجا آموزش بدم
@hekmati کاش بیشتر توضیح می دادید. یعنی برای آیکون های font awesome هم میشه این کار رو انجام بدیم؟
با تشکر
@matio اگه fontAwesome رو دانلود کنید یه پوشه به اسم svgs داره که از اونجا کد svg آیکون مورد نظرتون رو پیدا میکنید.
بعد میتونید از این ابزار برای انکد کردن svgها استفاده کنید.
در آخر میتونید یه کد css مثل این داشته باشید:
.icon {
width: 1em;
height: 1em;
font-size: 1.5rem;
vertical-align: middle;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: inline-block;
}
.icon-time {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='255' height='255' viewBox='0 0 17 17'%3E%3Cg%3E%3C/g%3E%3Cpath d='M8.666 0c-4.687 0-8.5 3.813-8.5 8.5s3.813 8.5 8.5 8.5 8.5-3.813 8.5-8.5c0-4.687-3.813-8.5-8.5-8.5zM8.666 16c-4.136 0-7.5-3.364-7.5-7.5s3.364-7.5 7.5-7.5 7.5 3.364 7.5 7.5-3.364 7.5-7.5 7.5zM14 9v1h-6v-5h1v4h5z' fill='%23000000' /%3E%3C/svg%3E%0A");
}و کد html
<i class="icon icon-time"></i>