Creating button with icon inside border?

1

2

I tried something similar a few weeks ago (but didn’t end up using it) and found out that you can use Font Awesome in the ::before pseudo-element (source):

#btn-view-map::before {
    font-family: FontAwesome;
    content: "\f041"
}

The unicode f041 corresponds to fa-map-marker and can be found on the icon’s reference page.

Here is a quick demo:

I’m not sure if this is the best way to do it and it can certainly be done using <div>s. I hope that helps! :slight_smile:

EDIT: I’m so sorry! The code from before using negative margin was wrong and does not actually center the map marker. I have made a change in the CSS of the pseudo-element from margin-left: -12px to transform: translateX(-50%)!

3 Likes
3

Thank you <3 for your help