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

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.

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 رو دادیم و به همراه اونا سایزش رو هم مشخص کردیم.

خروجی:

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

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

خروجی:

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

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

خروجی:

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

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

یا علی

Source