html - 获取dashicon以与文本垂直对齐

Question

我正在使用内置于 wordpress 中的破折号。

每当我在文本之前或之后使用图标时，它们就会不对齐。我将如何制作它，以便图标与文本对齐？

我可以更改 HTML 以使其成为单独的元素，但优先使用“之前”选择器仅寻找 css 解决方案。

a:link {
    text-decoration: none;
}

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

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

jsfiddle

Answer 1

您可以在图标上使用 inline-block 和中间对齐:before。例子：

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

请参阅更新的小提琴