finding out the correct css path

Question

I am using a plugin call fullPage.js and I am wondering if I could use jquery to change the bullets of navigation on the right.

So this is the HTML code of the navigation bar

<div id="fp-nav" class="right" style="color: rgb(0, 0, 0); margin-top: -63.5px;">
  <ul>
    <li data-tooltip="">
      <a href="#home" class="">
      <span></span>
      </a>
    </li>
  <ul>
</div>

I am trying out and wondering how do I reach because this is the place to change the bullet to something I want to.

I want to use ionicons.css icons.

So for example, I tried doing this.

$("#fp-nav#home span").addClass("icon ion-home");

This piece of code is not working and I am wondering did I get the path correctly?

You haven't shown us the path or your folder structure...so we have no way of knowing. — Paulie_D, Oct 10 '14 at 10:10
You could use pure css: http://stackoverflow.com/a/13354689/3269816 — Andreas Furster, Oct 10 '14 at 10:10
i guess he is talking about the selector path not folder structure @Paulie_D — Neel, Oct 10 '14 at 10:11
I just try adding #fp-nav #home span { content: "\f1c9"; font-family: ionicons; } to my css and it didnt change the icon.. — John, Oct 10 '14 at 10:16
the content property can be only used in `:before` or `:after` — Andreas Furster, Oct 10 '14 at 10:32

Andreas Furster · Answer 1 · 2014-10-10T12:12:10.247

1

If you want, you could use pure css like this:

    <html>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
    ul {
      list-style-type: none;
      padding: 0;
    }
    ul li:before{
      font: normal normal normal 14px/1 FontAwesome;
    }
    ul.myList li:before {
    content: "\f015";
    }
    ul.myOtherList li:before {
    content: "\f04e";
    }
    </style>
       <body>
          <ul class="myList">
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
          </ul>
          <ul class="myOtherList">
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
          </ul>
        </body>
    </html>

And instead if '>> ' you could use the char and font from your icons.

edited Oct 10 '14 at 12:12

answered Oct 10 '14 at 10:12

Andreas Furster

1,338
1
10
26

Because every content is different, so how do I know which li:before belongs to which? – John Oct 10 '14 at 10:16
You could give the ul a class or id. – Andreas Furster Oct 10 '14 at 10:22
I think I found my own solution. I do not know if I can do this or not but I did change everything accordingly – John Oct 10 '14 at 10:24
Than post your own answer. Maybe we can learn from each other ;) – Andreas Furster Oct 10 '14 at 10:25

score 1 · Answer 2 · answered Oct 10 '14 at 10:27

1

These information can help you:

ul {
 list-style-type: square;
 list-style-position: outside;
 list-style-image: none;
}

and These are the values for "list-style-type" property :

disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none

and if you want your icon , you can use list-style-image property.

answered Oct 10 '14 at 10:27

IVIajid

190
8

No, he want's his own icon, not one of your list – Andreas Furster Oct 10 '14 at 10:27
He can do that by the list-style-image property. – IVIajid Oct 10 '14 at 10:29
Isn't the format of the icon a png,gif,ico file? :) – IVIajid Oct 10 '14 at 10:36
Aha. list-style-image get the image as the icon of your list! – IVIajid Oct 10 '14 at 10:37
The most iconsheets are based on fonts. The font-sheet is actually a font-family. Take a look at font-awesome: http://fortawesome.github.io/Font-Awesome/cheatsheet/ – Andreas Furster Oct 10 '14 at 12:03
It's one way. We can use images too, you know ... but thanks because of the link. I haven't seen it till now :) – IVIajid Oct 10 '14 at 12:25

score 0 · Answer 3 · answered Oct 10 '14 at 10:25

I went into jquery.fullPage.js

Somewhere there is this create vertical navigation bar section

All I did was, according to my link anchor names, I create seperate codes to make different icons..

Here it is..

        if(link == 'home') {
        nav.find('ul').append('<li data-tooltip="' + tooltip + '"><a href="#' + link + '"><span class="icon ion-home"></span></a></li>');
        } else if(link == 'about') {
            nav.find('ul').append('<li data-tooltip="' + tooltip + '"><a href="#' + link + '"><span class="icon ion-person"></span></a></li>'); 
        } else if(link == 'serv'){
            nav.find('ul').append('<li data-tooltip="' + tooltip + '"><a href="#' + link + '"><span class="icon ion-gear-b"></span></a></li>');
        } else if(link == 'team'){
            nav.find('ul').append('<li data-tooltip="' + tooltip + '"><a href="#' + link + '"><span class="icon ion-ios7-people"></span></a></li>');
        } else if(link == 'portfolio'){
            nav.find('ul').append('<li data-tooltip="' + tooltip + '"><a href="#' + link + '"><span class="icon ion-images"></span></a></li>');
        } else if(link == 'contact'){
            nav.find('ul').append('<li data-tooltip="' + tooltip + '"><a href="#' + link + '"><span class="icon ion-email"></span></a></li>');
        } else {
            nav.find('ul').append('<li data-tooltip="' + tooltip + '"><a href="#' + link + '"><span></span></a></li>');
        }

This is a perfect example where it's a lot nicer to use a `switch` statement. I didn't know you had that much variations. — Andreas Furster, Oct 10 '14 at 10:27

finding out the correct css path

3 Answers3