ورود به کارتابل مشتریان وب مهراز
آیکون ها در CSS
یادگیری 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> 
نظر شما
>