campaign-Ghorban-to-Ghadir

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



visibility  
mode_comment   ۰

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

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

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

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

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

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

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

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

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

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

مثالها

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

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

خروجی:i1

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

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

خروجی:i2

 

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

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

خروجی:i3

 

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

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

یا علی

Source

متخصص فرانت اِند
طراحی وب را اصولی فرا بگیرید اگر تصمیمتو گرفتی که به صورت حرفه ای به طراحی UI مشغول بشی و کسب درآمد کنی دوره فرانت اند رو از دست نده، چون توی این دوره هر چیزی که برای رسیدن به هدفت نیاز داری رو در اختیارت قرار می دیم. متخصص فرانت اِند arrow_back
comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.