获取dashicon与文本垂直对齐

Question

我正在使用内置于 wordpress的dashicons。

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

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

a:link {
    text-decoration: none;
}

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

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

提琴手

Answer 1

您可以在图标上使用内联块和中间对齐:before。例子：

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

请参阅更新的小提琴