हेल्लो दोस्तों, आज हम CSS Code के माध्यम से Icon Bar को बनायेंगे इस Icon Bar को बनाना बहुत ही आसान है यदि आप भी सीखना चाहते है कि CSS Code के माध्यम से Icon Bar को कैसे बनाते है तो आप हमारे इस पोस्ट को ध्यान से पढ़े यदि आप चाहे तो इस पोस्ट में नीचे इस Project के code दिए गए है आप चाहे तो वहां से कॉपी कर सकते है
Icon Bar Demo
सबसे पहले हम body को create करेंगे
body {
margin:0;
}
अब इसके बाद हम icon bar के बैकग्राउंड को कलर देंगे एवं उसके बैकग्राउंड साइज़ का निर्धारण करेंगे जितने area में हमें icon bar चाहिए
.icon-bar {
width: 100%;
background:#f9be00;
overflow: auto;
}
अब इसके बाद हम .icon-bar a { (लिंक) style बनायेंगे जिससे हमें icon को सही तरीके से दिखे
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
उपरोक्त कोड में हमने सबसे पहले icon के लिंक को side by side float किया है उसके बाद width को 20% दिया है text-align को center किये है और इस padding: 12px 0; कोड के माध्यम से हम कुछ Padding दिए है Hover Effect के लिए हम इस transition: all 0.3s ease; कोड के माध्यम से transition को Add किये है तथा icon को कलर दिए है उसके बाद icon को साइज़ दिए है आप दिए गए उपरोक्त कोड में अपने अनुसार कोई भी बदलाव कर सकते है
अब इसके बाद हम लिंक के Hover के Effect को कलर देंगे निम्न कोड के माध्यम से
.icon-bar a:hover {
background-color: #fee000;
}
उपरोक्त कोड से हमने लिंक के Hover के Effect को कलर दे दिया है
अब हमारा CSS style तैयार है अब index file तैयार तैयार करेंगे जिसका कोड नीचे दिया गया है
<div class="icon-bar">
<a 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>
उपरोक्त कोड में आप # को लिंक से replace कर दे जिससे उक्त icon पर click करने से उस पेज पर प्रवेश कर सके जहा आप चाहते है
अब आपको Icon Bar Project का पूरा कोड Provide किया जा रहा है आप चाहे तो नीचे कॉपी वाले बटन पर click करके पूरे कोड को कॉपी कर सकते है