文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Font-Awesome中修改文本？

问如何在Font-Awesome中修改文本？
EN

Stack Overflow用户

提问于 2015-05-28 02:54:32

回答 3查看 1.1K关注 0票数 0

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

我有以下代码。如何更改"example@gmail.com“的字体？

html

css

fonts

font-awesome

回答 3

Stack Overflow用户

发布于 2015-05-28 03:01:28

我假设你想要一个不是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是您的电子邮件地址所在的字体，乔治亚和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>

票数 3

Stack Overflow用户

发布于 2015-05-28 06:35:35

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

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

您所要做的就是使用.fa选择器更改字体，然后将.fa::before选择器重新设置为FontAwesome。

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

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

票数 1

Stack Overflow用户

发布于 2015-05-28 03:06:12

你可以把你的文本放在一个有类的span中。更改样式表中类的字体。例如：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30490859

复制

相似问题

问如何在Font-Awesome中修改文本？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Font-Awesome中修改文本？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Font-Awesome中修改文本？
EN