80

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

Ben
  • 4,301
  • 6
  • 37
  • 61

7 Answers7

110

Yes, ►, but it might not look the same in all browsers.

elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • 4
    Characters should not be expected to look the same, but this character, BLACK RIGHT-POINTING POINTER (U+25BA), is of simple shape, and font designers have little reason to do anything exotic with it. It has good font coverage, including very common fonts like Arial: http://www.fileformat.info/info/unicode/char/25ba/fontsupport.htm – Jukka K. Korpela Feb 14 '12 at 18:45
  • 8
    Just to clarify: ► is equivalent to (U+25BA) – NoBrainer Oct 23 '13 at 17:56
  • 11
    Be careful, everyone. 25BA looks squished on some devices because it's a "pointer" and not a "triangle." If you're looking for an equilateral triangle, use 25B6. Here's a chart: http://www.w3schools.com/charsets/ref_utf_geometric.asp – Steve Chab Jan 16 '15 at 21:33
  • Is there any code for back button I am using the above code as forward button as ► + | ? – Rahul Apr 16 '15 at 06:29
37

If you need to use it in CSS, as in 

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

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

silverliebt
  • 591
  • 5
  • 5
33

► from Wolfram Alpha

Community
  • 1
  • 1
Till Hoffmann
  • 9,479
  • 6
  • 46
  • 64
  • Holy cow. I logged in to say thanks for teaching me this about wolfram alpha. – jeremyosborne Oct 17 '12 at 15:22
  • 1
    Regarding the suggested edit (I don't have enough reputation to reject it): The point is that you can paste the symbol into WolframAlpha and don't need to know the HTML representation. The form in which I posted was fully intentional. Please revert to the original version. – Till Hoffmann Jul 30 '14 at 23:04
  • Here's all the other symbols http://www.wolframalpha.com/input/?i=characters+9632+through+9727&lk=1 – Matthew Lock Dec 03 '14 at 03:18
12

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>
Alex
  • 619
  • 1
  • 8
  • 25
11

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

http://brucejohnson.ca/SpecialCharacters.html

Bart
  • 19,692
  • 7
  • 68
  • 77
MetalFrog
  • 9,943
  • 1
  • 22
  • 24
  • 3
    Yes it is, under Unclassified Characters (http://brucejohnson.ca/SpecialCharacters.html#unclassified). – jonmorgan Feb 14 '12 at 17:17
0

You can use Bootstrap glyphicons.

<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/

-9

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.

karan k
  • 947
  • 2
  • 21
  • 45