CODEWITHSUNDEEP
htmlcssunicode
Lewis
Lewis

Reputation: 45

How to create a character like ► in Stackoverflow editor page?

enter image description here

I look up the soucecode of this pic.Just like this:

<p><span class="dingus">►</span> put returns between paragraphs</p>

Then I copy ► character into my website.It looks like this: enter image description here

As you can see,It turns out to be more wider? How to make a charater like Stackoverflow?

Upvotes: 2

Views: 145

Answers (2)

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146578

If your site uses a text encoding that supports the complete Unicode catalogue (such as UTF-8) and your editor supports it as well, you can just copy and paste the symbol. It's nothing but text. In 2017 there's little reason to not use UTF-8.

The fact that you see the character suggests that it's working fine for you. However, you need to understand that it isn't a picture and the way it looks is entirely determined by font and other CSS styles, just like any other letter:

div{
    font-size: 10pt;
}
.a{
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}
.b{
    color: orange;
    font-size: 15pt;
    text-shadow: 1px 2px 3px pink;
}
<div>►</div>
<div class="a">►</div>
<div class="b">►</div>

Most system fonts will not even have a glyph for the character and the browser will default to some builtin char, but if you happen to be using custom fonts you may be able to pick a specific representation.

If it's a legacy site that doesn't use Unicode, HTML entities come to the rescue. Among other things, they're a mechanism to insert characters that cannot be represented in the character encoding used by the document. In this case, the ► character is U+25B6 aka BLACK RIGHT-POINTING POINTER so you can use its Unicode code point:

&#x25B6;

Upvotes: 3

Ankur Jyoti Phukan
Ankur Jyoti Phukan

Reputation: 806

You can use this .. to Print the required symbol you want ►

<p style="font-size: 40px;">&#9658;</p>

Upvotes: 1

Related Questions