blocks|key|5519544|text|你不能，很容易。Fontawesome+(或任何字体)只有两种“颜色”：前景色和透明色。使用多种颜色的字体需要某种叠加技术(例如，将两个图标放在彼此的顶部)，这可能很难做到正确。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5519545|如果你想要颜色，坚持使用SVG，甚至是PNG。|5519546|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

You can't, easily. Fontawesome (or any font for that matter) has only two "colors": the foreground color and transparent. Using fonts with multiple colors requires some kind of overlay technique (I.e. Putting two icons on top of each other), which may be tricky to get right.

If you want color, stick with SVG, or even PNG.

blocks|key|2318556|text|我推荐使用Font+Awesome的SVG来获得你想要的效果。通过使用"font“，伪元素::before扩展到元素本身之后。当使用SVG时，它非常适合元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2318557|有关这方面的更多信息，请访问：https://css-tricks.com/icon-fonts-vs-svg/|offset|length|2318558|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/icon-fonts-vs-svg/^0|0|F|15|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

I would recommend using Font Awesome's SVG to get the effect that you're looking for. With using a "font" the pseudo element ::before extends past the element itself. When using an SVG it fits the element perfectly.

You can find out more information on this at: <a href="https://css-tricks.com/icon-fonts-vs-svg/" rel="nofollow">https://css-tricks.com/icon-fonts-vs-svg/</a>

blocks|key|411375|text|这是因为字体就是这样设置的。您可以使用FontAwesome拥有的另一种facebook字体<i+class="fa+fa-facebook'>，然后使用CSS对其进行处理，使其看起来类似。这里有一个小提琴的例子。http://jsfiddle.net/q1pL3bop/1/|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|411376|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/q1pL3bop/1/^0|1A|U|33|V|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

That's because it's how the font is set. You can use the other facebook font <code>&lt;i class="fa fa-facebook'&gt;&lt;/i&gt;</code> that FontAwesome has and then manipulate it with CSS to look something similar. Here's a fiddle example. <a href="http://jsfiddle.net/q1pL3bop/1/" rel="nofollow">http://jsfiddle.net/q1pL3bop/1/</a>

blocks|key|411381|text|您可以将多个FontAwesome图标堆叠在一起，并在CSS中添加一些额外的格式。fa-square和fa-facebook可以很好地结合在一起，尽管你必须调整对齐和定位才能做到恰到好处。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411382|堆栈的基本标记：|411383|<span+class="fa-stack+fa-5x">
++++<i+class="fa+fa-square+fa-stack-2x">
++++<i+class="fa+fa-facebook+fa-stack-1x+fa-inverse">
|code-block|syntax|javascript|411384|文档：http://fortawesome.github.io/Font-Awesome/examples/|offset|length|411385|带有颜色的演示，草率地对齐：http://codepen.io/blindingstars/pen/WvVevE|411386|entityMap|0|LINK|mutability|MUTABLE|url|http://fortawesome.github.io/Font-Awesome/examples/|1|http://codepen.io/blindingstars/pen/WvVevE^0|0|0|0|3|1F|0|0|E|16|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@$K|16|L|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

You can stack multiple FontAwesome icons together, and with CSS, add in some extra formatting. fa-square and fa-facebook can combine well together, though you'll have to fiddle around with alignment and positioning to get it just right.

Basic markup for a stack:

<pre><code>&lt;span class="fa-stack fa-5x"&gt;
 &lt;i class="fa fa-square fa-stack-2x"&gt;&lt;/i&gt;
 &lt;i class="fa fa-facebook fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
&lt;/span&gt;
</code></pre>

Documentation: <a href="http://fortawesome.github.io/Font-Awesome/examples/" rel="nofollow">http://fortawesome.github.io/Font-Awesome/examples/</a>

Demo with colors, sloppily aligned: <a href="http://codepen.io/blindingstars/pen/WvVevE" rel="nofollow">http://codepen.io/blindingstars/pen/WvVevE</a>

blocks|key|408579|text|Font+Awesome+5现在有了DUOTONES，这是在一个图标中使用两种颜色的更好的方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|408580|官方资源链接：https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons|offset|length|408581|​|408582|📷|atomic|408583|408584|<div+class="fa-3x">
++<i+class="fad+fa-bus-alt"+style="--fa-primary-color:+gold;">++
++<i+class="fad+fa-bus-alt"+style="--fa-primary-color:+orangered;">+
++<i+class="fad+fa-fill-drip"+style="--fa-secondary-color:+limegreen;">++
++<i+class="fad+fa-fill-drip"+style="--fa-secondary-color:+rebeccapurple;">+
++<i+class="fad+fa-battery-full"+style="--fa-primary-color:+limegreen;+--fa-secondary-color:+dimgray;">+
++<i+class="fad+fa-battery-quarter"+style="--fa-primary-color:+orange;+--fa-secondary-color:+dimgray;">+
</div>|code-block|syntax|javascript|408585|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/d1118a292e0aa6cf96be811425aa8c0e.png|imageAlt^0|0|7|1V|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|F|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|K|3|G|5|6|7|1E|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1F|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|Z|U|10|A|$11|12|13|-4]]]]

Font Awesome Pro 5 now has DUOTONES, and this would always be the preferable way to use two colors in a icon.

Official Resource Link: <a href="https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons" rel="nofollow noreferrer">https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons</a>

<a href="https://i.stack.imgur.com/SxU1T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SxU1T.png" alt="enter image description here"></a>

<pre><code>&lt;div class="fa-3x"&gt;
 &lt;i class="fad fa-bus-alt" style="--fa-primary-color: gold;"&gt;&lt;/i&gt; &lt;!-- primary layer color defined --&gt;
 &lt;i class="fad fa-bus-alt" style="--fa-primary-color: orangered;"&gt;&lt;/i&gt; &lt;!-- primary layer color defined --&gt;
 &lt;i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"&gt;&lt;/i&gt; &lt;!-- secondary layer color defined --&gt;
 &lt;i class="fad fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"&gt;&lt;/i&gt; &lt;!-- secondary layer color defined --&gt;
 &lt;i class="fad fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"&gt;&lt;/i&gt; &lt;!-- secondary + primary layer color defined --&gt;
 &lt;i class="fad fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"&gt;&lt;/i&gt; &lt;!-- secondary + primary layer color defined --&gt;
&lt;/div&gt;
</code></pre>

I would like to use Font Awesome´s Facebook icon, but I have difficulty in adjusting colors properly. My webpage background color is grey, and I would like to have an icon with mixture of white &amp; blue, but extent of colors doesn´t adjust properly. Following is my HTML code:

<pre><code> &lt;a class="list-group-item" href="https://www.facebook.com/pages/Scientific-Editing-and-Proofreading/726988900763622" target="_blank"&gt;&lt;i class="fa fa fa-facebook-square fa-5x fa-cog-fa"&gt;&lt;/i&gt;&lt;/a&gt;
</code></pre>

And following is my css:

<pre><code>.fa-cog-fa {
color: white;
background-color:blue;
}
</code></pre>

And you can see the final look under following link:
<a href="http://i.stack.imgur.com/LHZQl.jpg" rel="nofollow">this is how my code at the end appear</a>

As you see, blue color is so extent such that crosses borders of white color. How can I fix this issue?

how to adjust two colors in Font Awesome?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想使用Font Awesome的Facebook图标，但我很难正确调整颜色。我的网页背景颜色是灰色的，我想要一个白色和蓝色混合的图标，但颜色的范围不能正确调整。以下是我的HTML代码： <a class="list-group-item" href="https://www.facebook.com/page...

问如何在字体中调整两种颜色？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在字体中调整两种颜色？EN