آیا می دانید تا کنون 8815 نفر در 19 دوره آموزشی سون لرن ثبت نام کرده اند !

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

0 631 ۱۱ اردیبهشت ۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :