使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

- Kevin M

---

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align - CBroe

Answer 1

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

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

请查看更新的代码片段。

- Nanang Mahdaen El-Agung

---

谢谢。我之前尝试使用了vertical-align，但是没有成功。使用display:inline-block解决了问题 :) - Kevin M

嗨。我在我的页面上尝试了这个：https://www.publictalksoftware.co.uk/support-forums/，但是它们没有对齐。我已经将样式删除了。有什么建议吗？谢谢。 - Andrew Truckle