%45 تخفیف، با کد Tabestan روی تمام آموزش ها، بمناسبت جشنواره تابستانه بیاموز ...!
زمان باقی مانده (آخرین فرصت ها)
سبد (0)

تبلیغات

آیکن های واکنشگرا

 

کتابخانه های آیکون

با  W3.CSS شما میتوانید کتابخانه آیکون مورد نظر خود را استفاده کنید مانند:

  • آیکون های Font Awesome
  • آیکون هایGoogle Material Design
  • آیکون هایBootstrap

استفاده از کتابخانه آیکون

برای افزودن یک آیکون :

  1. کتابخانه آیکون را از CDN( شبکه دریافت محتوا) درون قسمت<head>  قراردهید.
  2. نام کلاس آیکون را به هر عنصر درون خطی اضافه کنید.

نکته :عناصر <i> و<span> به صورت گسترده برای افزودن آیکون ها استفاده میشوند.

برای کنترل اندازه آیکون ،خصوصیت font-size  مربوط به آیکون را تغییر دهید یا از کلاس های  w3-size استفاده کنید:

  • w3-tiny
  • w3-small
  • w3-large
  • w3-xxlarge
  • w3-xxxlarge
  • w3-jumbo

بعضی آیکون های فونت Awesome 

مثال

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>

</body>
</html>
خودتان امتحان کنيد »

بعضی آیکون های طراحی   Google Material 

مثال

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>

<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>

</body>
</html>
خودتان امتحان کنيد »

بعضی آیکون های  Bootstrap 

مثال

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>

<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>

</body>
</html>
خودتان امتحان کنيد »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی