CSS آیکون‌ها برای افزودن نمایش‌های گرافیکی، نمادها یا تصاویر کوچک به عناصر وب استفاده می‌شوند. آنها در توسعه وب به چندین هدف کمک می‌کنند، از جمله:
تجربه کاربری بهبود یافته: ارائه نشانه‌های بصری و زمینه به اجزای مختلف در یک صفحه وب، مانند اضافه کردن نمادها برای نمایش‌دهی آنها به جای متن‌هایی مانند “ذخیره”، “حذف” و غیره.
کاهش زمان بارگیری: آیکون‌های CSS معمولاً نسبت به آیکون‌های تصویری سنتی، سبک‌تر هستند، به این معنی که می‌توانند به سرعت بارگیری شوند و زمان کلی بارگیری صفحه را کاهش دهند.
قابلیت تغییر اندازه: آیکون‌های CSS به راحتی می‌توانند بدون از دست دادن کیفیت مقیاس‌پذیر شوند. این امر برای طراحی وب پاسخگو بسیار مهم است.
سفارشی‌سازی: آیکون‌های CSS می‌توانند با تغییر اندازه، رنگ و ویژگی‌های دیداری دیگر با استفاده از قوانین CSS سفارشی‌سازی شوند. این انعطاف‌پذیری به شما اجازه می‌دهد تا آیکون‌ها را با طرح کلی و برندینگ وبسایت خود هماهنگ کنید.
دسترس‌پذیری: آیکون‌های CSS می‌توانند طبق استانداردهای دسترس‌پذیری تنظیم شوند، مانند ارائه متن جایگزین برای خوانندگان صفحه.
کاهش درخواست‌های HTTP: استفاده از آیکون‌های CSS می‌تواند تعداد درخواست‌های HTTP ایجاد شده توسط یک صفحه وب را کاهش دهد، زیرا آنها اغلب قسمتی از شیوه‌نامه هستند.
برای ایجاد آیکون‌های CSS، توسعه‌دهندگان اغلب از روش‌هایی مانند عنصرهای ساختگی CSS (::before و ::after)، فونت‌های آیکون، یا SVGهای درون‌خط استفاده می‌کنند. هر رویکردی مزایا و معایب خود را دارد و انتخاب بستگی به نیازهای خاص پروژه دارد.
کتابخانه‌ها و فریمورک‌های آیکون محبوب مانند Font Awesome، Material Icons و Bootstrap Icons نیز به طور گسترده برای ساده‌سازی فرآیند اضافه کردن آیکون‌ها به برنامه‌های وب استفاده می‌شوند.
افزودن آیکون‌ها
برخی از روش‌های معمول برای اضافه کردن آیکون‌های CSS عبارتند از:
استفاده از عناصر ساختگی CSS (::before و ::after): شامل استفاده از عناصر ساختگی ::before و ::after برای درج محتوا قبل یا بعد از یک عنصر HTML و سپس استایل دهی به آن محتوا برای نمایش آیکون.
فونت‌های آیکون: فونت‌های آیکون، فونت‌های سفارشی هستند که شامل آیکون‌ها به عنوان گلیف هستند. می‌توانید از این فونت‌ها برای نمایش آیکون‌ها با تنظیم font-family مناسب و مشخص کردن کاراکتر یونیکد آیکون استفاده کنید.
SVGهای درون‌خط: شامل جاسازی SVG (وکتورهای مقیاس‌پذیر) مستقیماً در کد HTML شما است. می‌توانید آیکون‌های SVG را ایجاد یا به دست آورید و آنها را به عنوان عناصر درون‌خط درج کنید.
تصاویر پس‌زمینه CSS: می‌توانید از تصاویر پس‌زمینه CSS برای نمایش آیکون‌ها با تنظیم خاصیت background-image روی یک عنصر استفاده کنید.
کتابخانه‌ها و فریمورک‌های CSS: بسیاری از کتابخانه‌ها و فریمورک‌های CSS مانند Font Awesome، Material Icons و Bootstrap Icons مجموعه‌های آیکون آماده است که می‌توانید به راحتی در پروژه‌های خود استفاده کنید. آنها اغلب با کلاس‌های آماده یا کلاس‌های ابزار می‌آیند.
CSS سفارشی: می‌توانید CSS سفارشی خود را برای آیکون‌ها ایجاد کنید و آنها را با استفاده از ویژگی‌های CSS مانند عرض، ارتفاع، حاشیه، شعاع حاشیه و غیره طراحی و استایل دهید. این رویکرد به شما کنترل کامل بر طرح آیکون‌های شما را می‌دهد.
در مجموع، استفاده از آیکون‌های CSS می‌تواند ظاهر و کارکرد عناصر وب را بهبود بخشیده و به طراحی زیبا و کارآمد کمک کند. انتخاب روش مناسب برای اضافه کردن آیکون‌ها به وبسایت شما به نیازهای خاص وبسایت و سلیقه شما بستگی دارد.
Using pseudo-elements
این قسمت از CSS Icons استفاده از عنصرهای ساختگی مانند ::before و ::after را برای درج یک آیکون قبل یا بعد از یک عنصر نشان می‌دهد. در ادامه مثالی نشان داده شده است:
<html>
<head>
<style>
.flavour-list {
list-style: none;
}
.flavour-list li {
font-size: 2em;
}
.flavour-list li::before {
content: url(images/smiley.png);
margin-right: 15px;
font-size: 20px;
}
.flavour-list li::after {
content: url(images/smiley.png);
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<ul class="flavour-list">
<li>Butterscotch</li>
<li>Chocolate</li>
<li>Coconut</li>
<li>Cookie n Cream</li>
<li>Roasted Almonds</li>
<li>Vanilla</li>
</ul>
</div>
</body>
</html>در این مثال، لیست مقادیر شامل انواع آبمیوه‌ها است. برای هر عنصر لیست، یک آیکون قبل از متن و یک آیکون بعد از متن اضافه شده است. این آیکون‌ها با استفاده از پیوسته ::before و ::after و با استفاده از خاصیت content در CSS تعیین شده‌اند.
Using Font Awesome
در اینجا از آیکون‌های پایه Font Awesome استفاده می‌شود. برای اضافه کردن آیکون‌های Font Awesome، ابتدا باید لینک زیر را در بخش <head> از HTML خود اضافه کنید:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">سپس برای اضافه کردن آیکون‌های Font Awesome، پیشوند fa را به همراه نام آیکون استفاده کنید. به عنوان مثال: fa-car، fa-address-book.
مثال زیر نحوه استفاده از آیکون‌های Font Awesome را نشان می‌دهد:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-envelope-open fa-6" style="font-size:65px;" aria-hidden="true"></i>
<i class="fa fa-heart fa-5" style="font-size:50px;" aria-hidden="true"></i>
<i class="fa fa-file fa-4" style="font-size:40px;" aria-hidden="true"></i>
<i class="fa fa-cloud fa-3" style="font-size:30px;" aria-hidden="true"></i>
<i class="fa fa-address-book fa-2" style="font-size:20px;" aria-hidden="true"></i>
<i class="fa fa-car fa-1" style="font-size:15px;" aria-hidden="true"></i>
</body>
</html>در این مثال، شما با استفاده از کلاس‌های fa و نام آیکون، آیکون‌های مختلفی را به صفحه اضافه کرده‌اید. همچنین می‌توانید اندازه هر آیکون را با استفاده از سبک font-size تنظیم کنید.
Using Background Images
در اینجا، تصویر پس‌زمینه نیز می‌تواند به عنوان یک آیکون استفاده شود. در مثال زیر نحوه استفاده از تصویر پس‌زمینه به عنوان یک آیکون نشان داده شده است:
<html>
<head>
<style>
.iconimg {
width: 50px;
height: 50px;
background-image: url('images/logo.png');
background-size: cover;
}
</style>
</head>
<body>
<div class="iconimg"></div>
</body>
</html>در این مثال، یک دیو با کلاس .iconimg ایجاد شده است که ابعاد آن به عرض و ارتفاع ۵۰ پیکسل تنظیم شده است. تصویر پس‌زمینه این دیو با استفاده از url('images/logo.png') تعیین شده است. همچنین با استفاده از background-size: cover; اندازه تصویر پس‌زمینه تنظیم شده است. به عبارت دیگر، تصویر پس‌زمینه این دیو به طور خودکار تغییر اندازه می‌یابد تا کل مساحت دیو را پوشش دهد.
Using Bootstrap Icons
در این مثال، ابتدا باید لینک مربوط به استایل‌شیت بوت استرپ را به صفحه HTML خود اضافه کنید. این لینک به صورت زیر است:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">سپس، می‌توانید از آیکون‌های بوت استرپ با استفاده از کلاس‌های مربوط استفاده کنید. در این مثال، از تگ <svg> برای نمایش آیکون‌های بوت استرپ استفاده شده است.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div style="padding: 10px">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
<path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-balloon-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.48 10.901C11.211 10.227 13 7.837 13 5A5 5 0 0 0 3 5c0 2.837 1.789 5.227 4.52 5.901l-.244.487a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115.16-.479.212-1.051-.076-1.629-.258-.515-.365-.732-.419-1.004a2.376 2.376 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.244-.487ZM4.352 3.356a4.004 4.004 0 0 1 3.15-2.325C7.774.997 8 1.224 8 1.5c0 .276-.226.496-.498.542-.95.162-1.749.78-2.173 1.617a.595.595 0 0 1-.52.341c-.346 0-.599-.329-.457-.644Z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-cart-fill" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
</div>
</body>
</html>Using Google Icons/Fonts
در این مثال، از نمادهای گوگل (Google Icons) یا همان Material Icons استفاده می‌شود. این نمادها از سمت گوگل فراهم شده‌اند و برای استفاده از آنها، کافی است لینک زیر را در بخش <head> از کد HTML خود اضافه کنید:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">پس از اضافه کردن این لینک، شما می‌توانید از نمادهای موجود در مجموعه Material Icons استفاده کنید. در مثال زیر، چند نماد از این مجموعه به عنوان مثال نشان داده شده است:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons" style="font-size:40px;">pets</i>
<i class="material-icons" style="font-size:40px;">settings</i>
<i class="material-icons" style="font-size:40px;">attachment</i>
<i class="material-icons" style="font-size:40px;">person</i>
<i class="material-icons" style="font-size:40px;">recycling</i>
</body>
</html>در این مثال، با استفاده از کلاس material-icons و تعیین اندازه مورد نظر با استفاده از ویژگی font-size، نمادهای مورد نظر به عنوان آیکون‌ها در صفحه نمایش نمایش داده شده‌اند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام