获取 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>

jsfiddle

Answer 1

您可以在图标上使用行内块和中间对齐方式 :before。示例：

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

见Updated Fiddle

获取 dashicon 与文本垂直对齐

Get dashicon to align vertically with text

html

css

wordpress

dashicons