html - 如何更改 HTML 中 <a> 标记内文本的字体大小

Question

我正在建立一个网站并在页脚中插入社交媒体链接。我正在使用 Font Awesome 的社交媒体图标(请参阅代码了解)。要使用这些图标，您必须使用您想要的任何图标的类来设置标签。我试图让图标比与其关联的文本更大。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a style="font-size:25px;" href="https://www.facebook.com/username/" class="fa fa-facebook"> @username</a>

<a style="font-size:25px;" href="https://www.instagram.com/username/" class="fa fa-instagram"> @username</a>

此代码导致图标和关联的文本均为 25 像素。我只想将文本的字体大小更改为 20px。

Answer 1

您使用的字体 awesome 错了。他们总是为此使用 < i > 标签，这样你就不必将它与 css 分开，所以 html 应该是这样的:

a {
  font-size:20px;
}

a i {
   font-size:25px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<a href="https://www.facebook.com/username/">
   <i class="fa fa-facebook"></i> @username
</a>
<a href="https://www.instagram.com/username/">
   <i class="fa fa-instagram"></i> @username
</a>

此外，您不必将内联 block 样式应用于图标，这已经在插件 CSS 中完成。