Solved

Arrow to indicate submenu

Posted on 2014-03-03
5
408 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 500 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

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

617 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