CODEWITHSUNDEEP
htmlascii
Ben
Ben

Reputation: 4371

How do I display ► Play (Forward) or Solid right arrow symbol in html?

How do I display this ► Play (Forward) or Solid right arrow symbol in html?

Upvotes: 83

Views: 208781

Answers (7)

user13096898
user13096898

Reputation:

Bootstrap glyphicons is a reliable library for icons:

https://getbootstrap.com/docs/3.3/components/

<span class="glyphicon glyphicon-play"></span><br>
<span class="glyphicon glyphicon-play-circle"></span><br>
<span class="glyphicon glyphicon-triangle-right"></span><br>

Remember to also include Bootstrap and jQuery in the <head> element.

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

JSFiddle explaining this: https://jsfiddle.net/canada/dfr90pac/

Upvotes: 0

karan k
karan k

Reputation: 977

Well, you could use an image and display it in the <img> tags. On their click event, you could write some JavaScript code. You could search the images in Google.

Upvotes: -9

Alex
Alex

Reputation: 618

I tried using the ascii code but didn't like it as it always looked stretched.

Instead, I found an ingenious easily customizable solution online, that uses css and only manipulates the border property:

.play {
  border-top: 10px solid white;
  border-bottom: 10px solid white;
  border-left: 20px solid black;
  height: 0px;
}
<div class="play"></div>

Upvotes: 12

silverliebt
silverliebt

Reputation: 621

If you need to use it in CSS, as in 

    li:before {
        content: '\25BA';
    }

This is the CSS conversion of &#9658; A helpful tool for these conversions: evotech.net/articles/testjsentities.html

Upvotes: 40

Till Hoffmann
Till Hoffmann

Reputation: 9877

&#9658; from Wolfram Alpha

Upvotes: 33

MetalFrog
MetalFrog

Reputation: 10523

Here's a long list of what you can use:

http://brucejohnson.ca/SpecialCharacters.html

Upvotes: 11

elclanrs
elclanrs

Reputation: 94101

Yes, &#9658;, but it might not look the same in all browsers.

Upvotes: 113

Related Questions