021-20483015

آیکون ها در CSS

نحوه اضافه کردن آیکون ها

ساده ترین راه برای اضافه کردن آیکون ها به صفحات HTML استفاده از پایگاه های آیکون ها مانند Font Awesome می باشد.
نام کلاس آیکون مورد نظر را می توان به هر عنصر اینلاین HTML (مانند <i> یا <span> )  اضافه کرد. تمام آیکون های موجود در پایگاه آیکون های زیر ، وکتورهای مقیاس پذیر (قابل تغییر اندازه) هستند و می توان با CSS اندازه و رنگ و سایه و ... آنها را سفارشی کرد.

 

آیکون های Font Awesome

برای استفاده از این آیکون ها کد زیر را به بخش  <head> در صفحه HTML اضافه کنید.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

نکته ! برای اینکار ، نیازی به دانلود یا نصب چیزی نیست.

مثال :

آیکون ها
 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

</body>
</html> 
مشاهده مثال


 

آیکون های Bootstrap

برای اضافه کردن گلیفیکون های بوت استرپ ، کد زیر را داخل بخش <head> صفحه HTML قرار دهید :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

نکته ! برای اینکار ، نیازی به دانلود یا نصب چیزی نیست.
مثال :

آیکون های بوت استرپ
 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html> 
مشاهده مثال


 

آیکون های گوگل

برای استفاده از آیکون های گوگل ، کد زیر را در بخش <head> صفحه HTML قرار دهید :

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

نکته ! برای اینکار ، نیازی به دانلود یا نصب چیزی نیست.

 
مثال :

آیکون های گوگل
 <!DOCTYPE html>
<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>

</body>
</html> 
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط