Solved

Arrow to indicate submenu

Posted on 2014-03-03
5
382 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
  • 2
  • 2
5 Comments
 
LVL 142

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 52

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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

932 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now