It is very easy to do and without using any images, I just used the characters sets tip to get the image I wanted to use then added it into the css.
So here is the css I used
@media only screen and (min-width:769px){
a.icon-down:after{content:'\25BD' ;font-size:13px;position:absolute;right:2px;bottom:7px;color:white;}
a.icon-down.hovered:after{ display:none }
}
- The min width is just to say only add them above this screen size. As under this they get added by the modile settings already.
- The 25BD is the code for the arrow
- Font Size is how big I want it
- Position is just setting it into our tab
- Right 2px is how far I want to be away from the right edge
- Bottom is how far I want up from the bottom of the tab
- Color white is the colours I want it to be
- And the last line is just saying when you hover over the tab remove the arrow for now
If you find it still encroaches on your text you may need to adjust the right and left padding in your design studio a little extra to give a little more room.
Here is the link again for a page with some good arrows, there are more options for other images on the left. See image.
Replies
Great tip Biz!