آموزش W3CSS

آموزش W3.CSS – آیکن ها

W3.CSS از کتابخانه های icon معروف زیر پشتیبانی می کنه:

  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Icons

کاربرد

نام کلاس

توضیحات

w3-tiny

یک آیکن با سایز خیلی کوچک طراحی می کنه.

w3-small

یک آیکن با سایز کوچک طراحی می کنه.

w3-large

یک آیکن با سایز بزرگ طراحی می کنه.

w3-xlarge

یک آیکن با سایز خیلی بزرگ طراحی می کنه.

w3-xxlarge

یک آیکن با سایز خیلی خیلی بزرگ طراحی می کنه.

w3-xxxlarge

یک آیکن با سایز خیلی خیلی خیلی بزرگ طراحی می کنه.

 مثال

w3css_icons.htm

<html>
   <head>
      <title>The W3.CSS Icons</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   <body class="w3-container"> 
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class="fa fa-cloud"></i>
      <i class="fa fa-cloud w3-large"></i>
      <i class="fa fa-cloud w3-xlarge"></i>
      <i class="fa fa-cloud w3-xxlarge"></i>
      <i class="fa fa-cloud w3-xxxlarge"></i>
      <i class="fa fa-cloud w3-text-teal" style="font-size:64px"></i>
      <h3>Google Material Design Icon Demo</h3>      
      <i class="material-icons w3-large">cloud</i>
	  <i class="material-icons">cloud</i>
      <i class="material-icons w3-xlarge">cloud</i>
      <i class="material-icons w3-xxlarge">cloud</i>
      <i class="material-icons w3-xxxlarge">cloud</i>
      <i class="material-icons w3-text-teal" style="font-size:64px">cloud</i>
      <h3>Bootstrap Icon Demo</h3>
      <i class="glyphicon glyphicon-cloud"></i>
      <i class="glyphicon glyphicon-cloud w3-large"></i>
      <i class="glyphicon glyphicon-cloud w3-xlarge"></i>
      <i class="glyphicon glyphicon-cloud w3-xxlarge"></i>
      <i class="glyphicon glyphicon-cloud w3-xxxlarge"></i>
      <i class="glyphicon glyphicon-cloud w3-text-teal" style="font-size:64px"></i> 
   </body>
</html>

نتیجه

خروجی کد بالا بصورت زیر خواهد بود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...