illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram