3

I am using the dashicons which are built into wordpress.

Whenever I am using an icon in front or after a text, they are out of alignment. How would I make it, so that the icon aligns with the text?

I could change the HTML to make it a separate element, but preferentially looking for a css solution only, using the "before" selector.

a:link {
    text-decoration: none;
}

.fullscreen:before {
    font-family: "dashicons";
    content: "\f211 ";
    font-size:20px;
}

<a class="fullscreen" href="#">FULL SCREEN</a>

jsfiddle

Abdulla Nilam
  • 36,589
  • 17
  • 64
  • 85
Kevin M
  • 1,202
  • 15
  • 30

1 Answers1

6

You can use inline-block and middle alignment on your icon :before. Example:

.fullscreen:before {
  font-family: "dashicons";
  content: "\f211 ";
  font-size:20px;
  display: inline-block;
  vertical-align: middle;
}

See Updated Fiddle

Nanang Mahdaen El-Agung
  • 1,404
  • 10
  • 14
  • Thank you. I used vertical-align before but without any luck. display:inline-block did the trick :) – Kevin M Jun 29 '15 at 11:03
  • Hi. I tried this on my page: https://www.publictalksoftware.co.uk/support-forums/ and the don't align. I took the styling back out. Any advice? Thanks. – Andrew Truckle Oct 21 '19 at 14:21