Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Arrow to indicate submenu

Posted on 2014-03-03
5
Medium Priority
?
422 Views
Last Modified: 2014-03-03
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
Comment
Question by:TimHudspith
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 143

Expert Comment

by:Guy Hengel [angelIII / a3]
ID: 39899917
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
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39900083
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
 

Author Comment

by:TimHudspith
ID: 39900222
The Fontawesome icons just show up as blank squares.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39900340
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
 

Author Comment

by:TimHudspith
ID: 39900388
The ones from here did the job:  http://dev.w3.org/html5/html-author/charref. Thanks.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question