Question

<i class="fa fa-envelope fa-lg">
    robfran@gmail.com
</i>

我有以下代码。如何更改＆＃34; example@gmail.com"？

的字体类型

Answer 1

我假设你想要的字体不是Font-Awesome。

做这样的事情：

HTML

<i class="fa fa-envelope fa-lg"></i><span class="email_font">example@gmail.com</span>

CSS

span.email_font {
    font-family: "Times New Roman", Georgia, Serif !important;
}

Times New Roman是您的电子邮件地址的字体，而Georgia和Serif是备用字体，以防计算机/浏览器/移动设备上未加载Times New Romans

您还可以指定font-style:（这可以是正常，斜体和斜），font-weight:（这可以是普通，粗体或数字）和font-size:（px中的数字），或％等）。还有其他，但这些是基础。

所以我们可以做到

span.email_font {
    font-family: "Times New Roman", Georgia, Serif !important;
    font-style: italic !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

那将以Times New Roman为您提供您的电子邮件，斜体，粗体和15px的大小。我添加了!important以确保实现这些样式。

如果你想内联简化，可以考虑不推荐。

<i class="fa fa-envelope fa-lg"></i>
<span style="font-family: 'Times New Roman', Georgia, Serif; font-style: italic; font-weight: bold; font-size: 15px ;">example@gmail.com</span>

Answer 2

FontAwesome使用css ::before伪元素来应用字形字体。

当您更改.fa选择器的字体时，字形消失的原因是FontAwesome样式表将字体应用于.fa选择器。

您只需使用.fa选择器更改字体，然后将.fa::before选择器重置为FontAwesome。

＆＃13;

i.fa {
   font-family: mono;
}
i.fa::before {
    font-family: 'FontAwesome';
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-envelope fa-lg">robfran@gmail.com</i>

＆＃13;

Answer 3

您可以将文本放在带有类的范围内。更改样式表中类的字体。 E.g：

<html>
<head>
    .anotherFont 
    {
        font-family: sans-serif;
    }
</head>

<body>
    <i class="fa fa-envelope fa-lg"></i>
        <span class='anotherFont'>
            robfran@gmail.com
        <span>
</body>
</html>

如何修改Font-Awesome中的文本？

3 个答案: