سلام برنامه در خدمت شماست با آموزش تصویری ساخت آیکن بار
آموزش تصویری ساخت آیکن بار این امکان را فراهم میکند که بتوانید یک منو تصویری داشته باشید
ما در این آموزش نحوه ساخت آیکن بار عمودی و افقی را به شما می دهیم
آیکن باری که می سازیم کاملا رسپانسیو بوده و با هر صفحه نمایشی هماهنگی دارد
برای ساخت آیکن بار از آیکن های سایت fontawesome استفاده می کنیم
شما هم می توانید مستقیما به سایت fontawesome رفته و فایل css آنرا دانلود کنید
یا کد زیر را در قسمت head سایت خود قرار دهید
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
سپس باید کد های زیر را به قسمت body خود اضافه کنید
<div class="icon-bar"> <a class="active" href="#"><i class="fa fa-home"></i></a> <a href="#"><i class="fa fa-search"></i></a> <a href="#"><i class="fa fa-envelope"></i></a> <a href="#"><i class="fa fa-globe"></i></a> <a href="#"><i class="fa fa-trash"></i></a> </div>
و در انتها برای ظاهر سازی و استایل دهی کد های زیر را به css خود اضافه کنید
body {margin:0;direction:rtl}
.icon-bar {
width: 90px;
background-color: #555;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50 !important;
}کار ساخت آیکن بار تمام است
شما می توانید برای مشاهده جزئیات بیشتر ویدیو آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید