CODEWITHSUNDEEP
htmlcssunicode
Steven Jeffers
Steven Jeffers

Reputation: 79

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

Hi so this may seem very basic, how-ever it's stumping me.

I'm pretty sure I have to style it in-line. But I can't make a paragraph tag 1 styled 1 not styled appear right next to each other on the same line as if there was no space they appear on different lines.

Here is the code

Made with ♥

The ideas is to have 1 line Made with (heart emoji) naturally coloured black, so i need to style it red, cause I don't have a black heart. do you? but when I do so I cant get them to stay on the same line!

The emoji doesn't tend to do well being .css targeted. So that doesn't seem like an option.

.hearted {
    color:red;
}
  <p class="hearted">&#9829;</p>

Send help! Thank you <3

Upvotes: 0

Views: 127

Answers (2)

Kameron
Kameron

Reputation: 10846

Have you considered using the span element?

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.

.hearted {
  color: red;
}
<p>Made with<span class="hearted"> &#9829;</span></p>

Upvotes: 1

iammithani
iammithani

Reputation: 106

Perhaps try to put the heart in a span with the family of Segoe UI Emoji, instead of 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>

Normally, in webpages, Segoe UI Symbol is used to give colourless symbols, but Segoe UI Emoji renders the emoji to its color

Upvotes: 0

Related Questions