Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 447
  • Last Modified:

Arrow to indicate submenu

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?
0
TimHudspith
Asked:
TimHudspith
  • 2
  • 2
1 Solution
 
Guy Hengel [angelIII / a3]Billing EngineerCommented:
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
0
 
Scott Fell, EE MVEDeveloperCommented:
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
0
 
TimHudspithAuthor Commented:
The Fontawesome icons just show up as blank squares.
0
 
Scott Fell, EE MVEDeveloperCommented:
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
0
 
TimHudspithAuthor Commented:
The ones from here did the job:  http://dev.w3.org/html5/html-author/charref. Thanks.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now