Posted in
6
2:43 am, September 24, 2021
down chevron and styles
a down chevron and the class to style it, default this is 16x16px but you can zoom it in or out easily, just change the height and width of it target with the class bi-chevron-down
HTML
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down chev-down-32" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down chev-down-8" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
CSS
.bi-chevron-down {
color:#F00;
}
/* a 32px chevron */
.chev-down-32 {
height:32px;
width:32px;
}
/* a 8px chevron */
.chev-down-8 {
height:8px;
width:8px;
}
View Statistics
This Week
15
This Month
98
This Year
0
Add Comment
Other Items in svg
Related Search Terms
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress