For the close buttons I showcased in my previous blog post I wanted to have an up arrow in the button as that was a nice, clean and concise way to get the buttons functionality across but I needed to find a way to do that. I was considering creating an image in Photoshop/Illustrator but that is really constrained. If someone increases the font size it will quickly become off. I luckily stumbled across this brilliant font:
This font is a massive collection of vector icons that can be called in CSS like any other font. Luckily they have a large collection of directional arrows within the font. And because they are vector they can be scaled regardless and look great:
I downloaded the font and called it in the CSS like so:
This makes it live in the CSS and able to be used as a font by simply using specifying the font-family as "fontawesome". In the HTML I then just had to put the value to the correct set of characters that called in the desired arrow (in this case the value is "":
And that's it done! To include it in the info section I just added a <span> in the middle of the <p> tag and styled the span in the same way as the button:
I am so happy that I found this font. The arrow looks great and it is vector so it is crisp on both a desktop and a retina iPhone. It is perfect for my needs. Here's the arrow in the info and in the button:
In the info:
In the button:
No comments:
Post a Comment