为段落中的符号着色，与段落文本在同一行 - CSS & HTML答案

【问题标题】：Coloring a Symbol, Within a Paragraph, On the Same Line as Paragraph Text - CSS & HTML为段落中的符号着色，与段落文本在同一行 - CSS & HTML
【发布时间】：2022-01-07 17:35:29
【问题描述】：

您好，所以这似乎很基本，但它让我很困惑。

我很确定我必须内嵌样式。但是我不能让段落标签 1 样式 1 不样式出现在同一行上，就好像它们没有出现在不同行上一样。

这里是代码

用♥制成

我们的想法是让 1 行由（心形表情符号）自然着色为黑色，所以我需要将其设置为红色，因为我没有黑色的心。你？但是当我这样做时，我无法让他们保持在同一条线上！

表情符号不太适合以 .css 为目标。所以这似乎不是一个选择。

.hearted {
    color:red;
}

  &lt;p class="hearted"&gt;&amp;#9829;&lt;/p&gt;

发送帮助！谢谢

【问题讨论】：

标签： html css unicode

【解决方案1】：

您是否考虑过使用span 元素？

span 元素是一个没有特定语义含义的通用容器。它通常与样式和类属性一起用于样式目的的 Web 创作。为孤立的文本跨度提供属性（如语言或标题）也很有帮助。

htmlquick.com

.hearted {
  color: red;
}

&lt;p&gt;Made with&lt;span class="hearted"&gt; &amp;#9829;&lt;/span&gt;&lt;/p&gt;

【讨论】：

非常好！我试图把心放在最后，虽然把头倒过来
天哪，我们知道了！
使用♥
css = .hearted { color: red } 谢谢！ Span 的想法奏效了！
@StevenJeffers 很高兴我能提供帮助。

【解决方案2】：

也许尝试将心放在 Segoe UI 系列 Emoji 中，而不是 Segoe UI Symbol

/*Using color based system on Segoe UI Symbol*/
p {
  color: black;
}
.symbol {
  color:red;
  font-family: Segoe UI Symbol;
}
/*Using Segoe UI Emoji*/
.emoji {
  font-family= Segoe UI Emoji, Segoe UI Symbol,
    Symbola, Quivira;
}

<p class="hearted"><span class="symbol">&#128147;</span> I am a colored heart symbol</p>
<br>
<p class="hearted"><span class="emoji">&#128147;</span> I am an emoji!</p>

通常，在网页中，Segoe UI Symbol 用于给出无色符号，但 Segoe UI Emoji 将 emoji 呈现为其颜色

【讨论】：

我不一定喜欢它的外观。
您可以选择使用十六进制代码作为表情符号/符号的内容，由您选择