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

Question

你好，这可能看起来很基础，但它让我很困惑。

我很确定我必须在线设置样式。但是我无法使段落标记 1 样式化 1 非样式化在同一行上彼此相邻出现，就好像没有 space 它们出现在不同的行上一样。

这是代码

用 ♥

制作

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

表情符号不太适合。css 有针对性。所以这似乎不是一个选择。

.hearted {
    color:red;
}

  <p class="hearted">&#9829;</p>

发送帮助！谢谢 <3

Answer 1

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

The span element is a generic container with no particular semantic meaning. It's commonly used in web authoring for styling purposes, in conjunction with the style and class attributes. It can also be helpful to provide attributes, like lang or title, to isolated spans of text.

htmlquick.com

.hearted {
  color: red;
}

<p>Made with<span class="hearted"> &#9829;</span></p>

Answer 2

或许试着把心和SegoeUIEmoji的家人放在一起，而不是SegoeUISymbol

/*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 渲染为其颜色

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

Coloring a Symbol, Within a Paragraph, On the Same Line as Paragraph Text - CSS & HTML

html

css

unicode