در این مقاله در مورد چگونگی افزودن آیکون ها در CSS صحبت می کنیم.
افزودن آیکون ها در CSS
آسان ترین روش برای افزودن آیکون ها در CSS ، استفاده از یک کتابخانه آیکون است مثل Font Awesome.
نام کلاس یک آیکون را به المان های inline فایل HTML خود بیفزایید. (نظیر i و span )
تمامی آیکون های کتابخانه font awesome وکتورهای مقیاس پذیری هستند که می توانید با استفاده از CSS، رنگ، اندازه و سایر خصوصیات آن ها را تغییر دهید.
Font Awesome Icons
برای استفاده از آیکون های font awesome کافیست کد زیر را در بخش head فایل HTML خود قرار دهید:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
نکته: هیچ گونه دانلود یا نصبی نیاز نیست.
به مثال زیر دقت کنید:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> </head> <body> <i class="fas fa-cloud"></i> <i class="fas fa-heart"></i> <i class="fas fa-car"></i> <i class="fas fa-file"></i> <i class="fas fa-bars"></i> </body> </html>
نتیجه را ادامه می بینید:
Bootstrap Icons
برای استفاده از glyphicons های 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>
Google Icons
برای استفاده از icon های google کافیست کد زیر را در بخش 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>
برگرفته از وب سایت w3schools
دیدگاه بگذارید