آموزش طراحی متریال با Materialize (جلسه 18) - آیکونها

دسته بندی: آموزش
زمان مطالعه: ۲ دقیقه
۱۱ اردیبهشت ۱۳۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

Materialize از فونت آیکونهای معروف زیر پشتیبانی میکنه:

  • فونت آیکون Font Awesome
  • فونت آیکون Google Material
  • فونت آیکون Bootstrap

برای استفاده از فونت آیکون Materialize باید علاوه بر فایل CSS اون، فایل زیر رو هم قرار بدین:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

میبینید که فونت آیکون Material Icon رو از گوگل فونت قرار دادیم.

برای استفاده از فونتهای Bootstrap باید فایل زیر رو قرار بدین:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

میتونید بصورت جداگونه هم فقط قسمت glyphicon اون رو گرفته و قرار بدین.

برای استفاده از فونت آیکون Font Awesome هم از لینک زیر استفاده میکنیم:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

برای استفاده از این فونت آیکون ها کافیه که ابزار مورد نظر رو وارد کنید و یک تگ i قرار بدین و نام آیکونی که میخاید استفاده کنید رو بعنوان کلاس اون قرار بدین. برای کنترل کردن سایز آیکون هم میتونین از کلاسهای زیر استفاده کنید:

  • tiny : نمایش آیکون در سایز خیلی کوچک. سایز اون 1rem هست
  • small : نمایش آیکون در سایز کوچک. سایز اون 2rem هست
  • medium : نمایش آیکون در سایز متوسط. سایز اون 4rem هست
  • large : نمایش آیکون در سایز بزرگ. سایز اون 6rem هست

مثالها

استفاده از فونت آیکون Materialize:

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

همونطور که میبینید به تگهای i مورد نظر کلاس materialize-icons رو دادیم و به همراه اونا سایزش رو هم مشخص کردیم.

خروجی:i1

استفاده از فونت آیکون Font Awesome:

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

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

خروجی:i2

 

استفاده از فونت آیکون Bootstrap:

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

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

خروجی:i3

 

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

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

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل