CODEWITHSUNDEEP
htmlcsswordpressdashicons
Kevin M
Kevin M

Reputation: 1312

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

Upvotes: 4

Views: 2996

Answers (2)

sk22
sk22

Reputation: 867

For me, this worked quite well: I copied the HTML from the Dashicons site, but added a custom class (dashicons-inline) to the span - which I defined in my custom CSS like this:

.dashicons-inline {
  vertical-align: text-bottom;
  font-size: 1.25em;
  width: 1em;
  height: 1em;
}

This makes the bottom of the text and the bottom of the icon box align. I also added font-size, width and height so the the icon scales up with the text size of its containing element (in my case, a link).

(font-size: 1.25em because Dashicons are 20x20px, and 1em is equivalent to 16px)

screenshot of a link with the arrow-right dashicon

Upvotes: 0

Nanang Mahdaen El-Agung
Nanang Mahdaen El-Agung

Reputation: 1434

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

Upvotes: 7

Related Questions