Search code examples
htmlcsswordpressdashicons

Get dashicon to align vertically with text

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

Solution

  • 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