آکادمی کدنویسان با هدف برگزاری آموزش های آنلاین راه اندازی شد. با ثبت نام در دوره های پیش رو، تابستان پرباری داشته باشید
طراحی واکنش گرا با متریالایز
  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Icons

برای استفاده از آیکن ها در متریالایز، باید نام آیکن دلخواه را داخل  تگ HTM از نوع <li> قرار دهید. برای کنترل کردن سایز آیکن می توانید از کلاس های زیر استفاده کنید.

نام کلاس  توضیحات
tiny برای ایجاد کردن یک آیکون خیلی کوچک به اندازه  ۱rem
small برای ایجاد کردن یک آیکون کوچک به اندازه  ۲rem
medium برای ایجاد کردن یک آیکون متوسط به اندازه  ۴rem
large برای ایجاد کردن یک آیکون بزرگ به اندازه  ۸rem

 

مثال

مثال زیر روش استفاده از آیکن های مختلف را نشان می دهد:

<html>
<head>
<title>The Materialize Icons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body class="container"> 
<h2>Icons Demo</h2>
<hr/>
<h3>Font Awesome Icon Demo</h3>
<i class="fa fa-cloud tiny"></i>
<i class="fa fa-cloud"></i> 
<i class="fa fa-cloud small"></i>
<i class="fa fa-cloud medium"></i>
<i class="fa fa-cloud large"></i> 
<h3>Google Material Design Icon Demo</h3> 
<i class="material-icons tiny">cloud</i>
<i class="material-icons small">cloud</i>
<i class="material-icons">cloud</i>
<i class="material-icons medium">cloud</i>
<i class="material-icons large">cloud</i> 
<h3>Bootstrap Icon Demo</h3>
<i class="glyphicon glyphicon-cloud tiny"></i>
<i class="glyphicon glyphicon-cloud"></i> 
<i class="glyphicon glyphicon-cloud small"></i>
<i class="glyphicon glyphicon-cloud medium"></i>
<i class="glyphicon glyphicon-cloud large"></i> 
</body> 
</html>

 

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

لیست آیکون ها در Materialize:

برچسب ها

, , , , ,

محصولات پیشنهادی


نظرات کاربران


نظرات برای آموزش چارچوب متریالایز | بدون نظر »

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

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


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.