جلسه ششم – نمایش آیکن ها در متریالایز

Font Awesome Icons
Google Material Icons
Bootstrap Icons

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

نام کلاس	توضیحات
tiny	برای ایجاد کردن یک آیکون خیلی کوچک به اندازه 1rem
small	برای ایجاد کردن یک آیکون کوچک به اندازه 2rem
medium	برای ایجاد کردن یک آیکون متوسط به اندازه 4rem
large	برای ایجاد کردن یک آیکون بزرگ به اندازه 8rem

مثال

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

<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>

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