Question

我正在使用插件调用fullPage.js，我想知道我是否可以使用jquery更改右侧的导航子弹。

所以这是导航栏的HTML代码

<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>

我正在尝试并想知道如何到达，因为这是将子弹改变为我想要的东西的地方。

我想使用ionicons.css图标。

例如，我尝试过这样做。

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

这段代码不起作用，我想知道我是否正确地获得了路径？

Answer 1

如果你愿意，你可以使用这样的纯css：

    <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>

而如果'>> '您可以使用图标中的字符和字体。

Answer 2

这些信息可以帮助您：

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

并且这些是＆＃34; list-style-type＆＃34;的值。财产：

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

如果你想要你的图标，你可以使用list-style-image属性。

Answer 3

我进入了jquery.fullPage.js

某处有创建垂直导航栏部分

根据我的链接锚名称，我所做的就是创建单独的代码来制作不同的图标..

这是..

        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>');
        }

找出正确的CSS路径

3 个答案: