Ankündigung

Einklappen
Keine Ankündigung bisher.

English: Navbar Icons - Icons in main navigation

Einklappen
X
Einklappen
Momentan aktive Benutzer in diesem Thema: 1 (0 Benutzer und 1 Gäste)
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    English: Navbar Icons - Icons in main navigation

    Original content in german

    To insert icons in the navigation I use jQuery and icons from Font Awesome .
    The advantage of this variant is that saving the navigation works in Sitebuilder and does not lead to errors due to changed phrases.
    The icons are simply placed over a code in front of the navigation element.

    Navbar icons


    Below is an explanation of how you can also include icons in the menu bar in your forum:

    Step 1:

    You select a suitable icon for each navigation element from the list in Font Awesome .

    Step 2:

    Find out which class the link has the navigation. Example link "Forums":

    HTML-Code:
    <li class="current section-item">
    <a href="https://vbulletin-forum.de/" class="h-left navbar_home">Foren</a>
    HTML-Code:
    class="h-left navbar_home"
    Here in the vBulletin forum this is for the example above:
    navbar_home
    Step 3:
    Create a template in which the jQuery can be inserted and which can be hooked into the footer.

    www.example.url/admincp/template.php?Do=modify &
    right in the for the desired style under "
    Choose action ..." -> "Create new template"
    content:
    HTML-Code:
    <script>
    $( '.navbar_home' ).prepend( '<i class="fa fa-home" aria-hidden="true"></i>&nbsp;' );
    </script>
    Step 4:
    Assign the template to the hook footer_before_body_end.

    For each icon, just copy this line, change the class, and add the appropriate icon.

    HTML-Code:
     <script>
    $( '.navbar_home' ).prepend( '<i class="fa fa-home" aria-hidden="true"></i>&nbsp;' );
    $( '.navbar_blogs' ).prepend( '<i class="fa fa-book" aria-hidden="true"></i>&nbsp;' );
    </script>
    If everything is set up correctly, the link looks like this later:
    HTML-Code:
     <li class="current section-item">
                                <a href="https://vbulletin-forum.de/" class="h-left navbar_home"><i class="fa fa-home" aria-hidden="true"></i>&nbsp;Foren</a>
    The following will be inserted by jQuery automatically:
    HTML-Code:
    <i class="fa fa-home" aria-hidden="true"></i>&nbsp;
    It`s nice to be important but it`s more important to be nice!

    #2
    Thanks work
    Zuletzt geändert von iask; 27.03.2018, 14:48.

    Kommentar


    • delicjous
      delicjous kommentierte
      Kommentar bearbeiten
      Usually it is named by navbar_ and your label of the link. So if your link is iask, your class is navbar_iask. If not you could look into the source-code (firefox -> cmd+u) or use right-click on that navbar-icon and then use (don't know how it labeled in english) investigate, development-console or something like this (dev-tools -> https://developer.chrome.com/devtools). If you click it the source-code is show up in a part of the window. So you will see the source-code of your button.
Lädt...
X