جهت مشاهده نتایج و تست کدها از ادیتور آنلاین استفاده کنید (کلیک کنید).

CSSاستفاده از آیکون ها در

برای درج آیکون درون صفحه وبسایت باید از سایت هایی که کد آیکون ها را تولید و نگهداری می کنند استفاده کنیم. دقت کنید که نیازی به دانلود دانلود و یا نصب نیست تنها کافیست به سایت نگهداری آیکون ها ارجاع دهیم. برای استفاده از آیکون ها باید از تگ های <i> یا <span> استفاده کرد. لیست کامل آیکون های موجود در گوگل در https://fonts.google.com/icons وجود دارد.

 

توجه کنید که برای آیکون ها می توان رنگ و سایز نیز تعیین کرد.

مثال:

<html> <head> <link rel=“stylesheet” href=“https://fonts.googleapis.com/icon?family=Material+Icons”> </head> <body> <i class=“material-icons”>cloud</i> <i class=“material-icons”>favorite</i> <i class=“material-icons”>attachment</i> <i class=“material-icons”>computer</i> <i class=“material-icons”>traffic</i> <span class=“material-icons” style=”font-size:24px;”>launch</span> <i class=“material-icons” style=“font-size:36px;”>cloud</i> <i class=“material-icons” style=“font-size:48px;color:red;”>cloud</i> <i class=“material-icons” style=”font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;”>cloud</i> </body> </html>

Scroll to Top