给导航栏前的图标链接

对不起，如果我的标题是错误的，我不能想到这个问题的好标题。我想要在导航栏前放一个小图标，以便访问者可以通过单击该图标进入另一个站点。所以，我试图在我的导航栏上课前给出这个图标。这样做，我发现，没有任何环节可以给课前。给导航栏前的图标链接

那么，有没有办法做到这一点，因为它从JS或通过改变一些样式，它将是非常有用的，如果它可以。

you can view what i meant from this link

 <nav class="navbar navbar-blend navbar-default"> 
     <div class="navbar-header pull-left"> 

        <a class="navbar-brand" href="http://upper.dev/suisse-japon-final/suissejapon110216/" rel="home" title=" Schweizerisch-Japanische Gesellschaft – www.swiss-japan.ch"> 
        <img src="http://2d6t692n0eb7333453op21it.wpengine.netdna-cdn.com/cym/wp-content/themes/30web/assets/img/logo.png" class="img-responsive showinbetween"></a> 
        </div> 
        <div class="navbar-header pull-right"> 
         <ul class="nav pull-left"> 
         <li class="dropdown pull-right"> 
         <div id="lang_sel"><ul><li><a href="#" class="lang_sel_sel icl-de">DE</a> <ul><li class="icl-en"><a href="http://upper.dev/suisse-japon-final/suissejapon110216?lang=en">EN</a></li></ul></li></ul><span class="sj-down-arrow">▾</span></div>       </li> 
         </ul> 
         <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
        </div> 

       <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1"> 
        <ul id="menu-menu-1" class="nav navbar-nav"> 
     <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-20"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/">Home</a></li> 
       <li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-155"> 
     <a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=140">About Us</a> 
      <ul class="sub-menu"> 
      <li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-175"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=156">Activities</a> 

     </li> 
       <li id="menu-item-527" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-527"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=234">Activities</a> 

     </li> 
      <li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-231"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=51">Membership</a> 

      </li> 
      <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=41">Various</a></li> 
      <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=31">Links</a></li> 
       <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=25">Contact</a></li> 
        </ul>    
          </div> 

      </nav>

很抱歉的标志和图标其仅用于演示。

您可以看到导航栏和导航栏品牌图片之间的小图标，我想将链接指向该小图标。

来源

2016-04-26 Sus Hill

没有得到您的问题。你能否更具体一些？ –

你可以在两个图像中看到小图标（在大视图=在主菜单之前）（在小视图=在语言选择器之前）我想给这个图标的链接 –

伪元素不是DOM的一部分，所以JS和jQuery可以给他们分配一个链接。您需要创建DOM元素并将其链接。 –

为什么在使用伪元素之前而不是元素？

<section id="nav-container"> 
<a class="nav-country" href="#yourlink"><i class="icon-country"></i></a> 
<nav id="main-nav">your navigation here</nav> 
</section>

来源

2016-04-26 07:34:39

这是一个好主意。谢谢 –

给导航栏前的图标链接

回答

相关问题