Arrow to indicate submenu

TimHudspith
TimHudspith used Ask the Experts™
on
I want a right-pointing arrow just like the one used here in the 'Select Topics' section  (when making a question) to indicate a submenu. How do I do it? Is this an HTML/CSS character or do I have to use an image file?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Guy Hengel [angelIII / a3]Billing Engineer
Most Valuable Expert 2014
Top Expert 2009

Commented:
there is no html/css to do this, unless you use the regular > character, but the display is not really controllable apart via the font, which may not be available on each customer's pc
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
EE looks like they are using css content
http://jsbin.com/gated/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <style>
a:after {content: " >";}
    </style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a href="#">Link 1</a>
</body>
</html>

Open in new window


The content is placed after the a tag.  

The arrow you see is an html entity \f105 from fontawsome.
An example of what you can do without loading external font http://jsbin.com/gated/2/edit
<!DOCTYPE html>
<html>
<head>
  <style>
a:after {content: "\2663";}
    </style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a href="#">Link 1</a>
</body>
</html>

Open in new window


The 2663 is the hex value of the entity.   They are all here http://dev.w3.org/html5/html-author/charref

Author

Commented:
The Fontawesome icons just show up as blank squares.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
The cool thing about making websites is there are many ways to get the same visual effect and sometimes there are multiple best ways.

If you look at the examples http://fortawesome.github.io/Font-Awesome/examples/
you can do the same in the html like this

  <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li>
 <li><a href="#"> Applications</a><i class="fa fa-pencil fa-fw"></i></li>
Just replace for the the icon you want

Author

Commented:
The ones from here did the job:  http://dev.w3.org/html5/html-author/charref. Thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial