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

【问题标题】：How to change font-size for text within an <a> tag in HTML如何更改 HTML 中 <a> 标记内文本的字体大小
【发布时间】：2019-11-06 11:07:54
【问题描述】：

我正在建立一个网站并在页脚中插入社交媒体链接。我正在使用 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。

【问题讨论】：

代码在哪里？
抱歉，不小心把帖子搞砸了。现在应该修好了。谢谢。

标签： html css

【解决方案1】：

使用 span 标签

<a>@<span style="font-size: 20px">username</span></a>.

通过这种方式，用户名的字体大小由 span 定位。

【讨论】：

【解决方案2】：

定位伪元素

a.fa::before {
  font-size:25px;
  display: inline-block;
}

a {
  font-size:20px;
}

<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/" class="fa fa-facebook"> @username</a>

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

【讨论】：

【解决方案3】：

该图标出现在::before 中生成的内容中。使用样式表定位该伪元素。

.fa::before {
  font-size: 25px;
}

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

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

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

【讨论】：

【解决方案4】：

取决于您的 HTML 版本：

HTML 5 声明元素“可以围绕整个段落、列表、表格等，甚至整个部分，只要其中没有交互式内容（例如按钮或其他链接）”。

HTML 4.01 指定元素只能包含内联元素。 fas 是一个块元素，所以它可能不会出现在 <a> 中。

如果您使用 HTML5，您可以在标签内使用 <div> 和 display: inline

如果您的 HMLT 应该兼容，则可以是跨度或一些内联属性

a{
font-size: 200px;
}

.fas{
font-size: 20px;
display: inline;
}

&lt;a href="#"&gt;&lt;div class="fas"&gt;hi&lt;/div&gt;Hello&lt;/a&gt;

【讨论】：

【解决方案5】：

您使用的字体真棒错误。他们总是为此使用标签，因此您不必将其与 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>

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

【讨论】：