• 0
HdEvFR

Problem to add icon on navigation

Question

Hello,

I have a problem adding the icon to the navigation.
I wish added icons here:

Capture.PNG.d3f8b4cc7ebe7b8cda7446ad012fcc89.PNG

And when I have a joke I have this in the title:

d.PNG.b300a0a46f9ebcf3479f9413905f868d.PNG

Thanks in advance for your help.

 

0

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

we need look the code you have change for help i think you have add your code at the wrong place

0

Share this post


Link to post
Share on other sites
  • 0
11 hours ago, HdEvFR said:

Hello,

I have a problem adding the icon to the navigation.
I wish added icons here:

Capture.PNG.d3f8b4cc7ebe7b8cda7446ad012fcc89.PNG

And when I have a joke I have this in the title:

d.PNG.b300a0a46f9ebcf3479f9413905f868d.PNG

Thanks in advance for your help.

 

 

15 minutes ago, titcrunch said:

we need look the code you have change for help i think you have add your code at the wrong place

Spot on, that looks to me that you put the class in the tab title, not in span itself. But as  @titcrunch pointed out we need to see the code to be able to debug and help with this.

0

Share this post


Link to post
Share on other sites
  • 0
4 hours ago, Cookie Monster said:

 

Spot on, that looks to me that you put the class in the tab title, not in span itself. But as  @titcrunch pointed out we need to see the code to be able to debug and help with this.

Hi,

I add <i class="fa fa-name of icon"></i> on my translate, because i can not edit the title on «Menu Manager».

Capture.PNG.a1658be23564dee88fe6ca6dd931f3a4.PNG

Note: I want the secondary navigation bar to be displayed, for example, on "Clubs". And by putting "External Link" the secondary bar disappears when you are on Clubs.

0

Share this post


Link to post
Share on other sites
  • 0

Hello @Cookie Monster, my problem is resolved.

Looking alone, I remembered having already seen the option of pages in the administration.

For members with a problem like me, I explain how I solved my problem:

 

1 - Go to ADMIN CP > System > Site promotion > Search Engine Optimization

Select Meta Tags and click to the button "+ add Meta Tags".

First, you have to add the relevant page.

Second the title of the page.

Capture.thumb.PNG.64ca902a48f6b6b88aef9de6a4162c65.PNG

2 - Go into your translation and add the code of an icons. For icons: http://fontawesome.io/icons/

Capture3.thumb.PNG.d2d1e063a92a639d0c5826b74a068602.PNG

3 - Result:

Capture2.thumb.PNG.f0d4fdee00af3494b30f65608dbc8347.PNG

0

Share this post


Link to post
Share on other sites
  • 0

<i> is a balise who need tio be arround the word so when you put this : 

<i class="fa fa-name of icon"></i> Clubs

is bad for seo and bad for code validation, you need have this :
 

<i class="fa fa-name of icon">Clubs</i>

 

0

Share this post


Link to post
Share on other sites
  • 0

 

nav.thumb.png.5afb931515e7e97bfde54ccb45e7324e.png

Customization > Theme > Edit html/css > CSS > custom.css

/* Primary Menu */
.ipsNavBar_primary > ul > li > a:before,
.ipsNavBar_secondary > li > a:before{
content: "\f00b";
font-family: "FontAwesome";
font-size: 14px;
font-weight: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: -2px;
margin-right: 3px;
opacity: 0.6;
line-height: 1;
}

/* The User menu and Create */
#elUserLink_menu a:before,
#elCreateNew_menu a:before{
content: "\f02b";
font-family: "FontAwesome";
font-size: 14px;
font-weight: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: -2px;
line-height: 1;
}

#elUserLink_menu a[href*="admin"] i{
display: none;
}

#elUserLink_menu a:before,
#elCreateNew_menu a:before{
display: inline-block;
width: 22px;
opacity: 0.7;
}

#elUserLink_menu a:hover:before,
#elCreateNew_menu a:hover:before{
opacity: 1;
}

/* Add Icon on the primary navigation bar */
.ipsNavBar_primary > ul > li[data-FontAwesome='Browse'] > a:before{ content: "\f0ac" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Store'] > a:before{ content: "\f07a" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Support'] > a:before{ content: "\f1cd" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Forums'] > a:before{ content: "\f086" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Gallery'] > a:before{ content: "\f030" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Downloads'] > a:before{ content: "\f019" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Articles'] > a:before{ content: "\f15c" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Blogs'] > a:before{ content: "\f02d" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Calendar'] > a:before{ content: "\f073" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Chat'] > a:before{ content: "\f27a" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Staff'] > a:before{ content: "\f007" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Users Online'] > a:before{ content: "\f2ce" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Activity'] > a:before{ content: "\f135" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Search'] > a:before{ content: "\f002" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Guidelines'] > a:before{ content: "\f0e3" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Tutorials'] > a:before{ content: "\f19d" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Clubs'] > a:before{ content: "\f0c0" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Leaderboard'] > a:before{ content: "\f091" }
.ipsNavBar_primary > ul > li[data-FontAwesome='All Activity'] > a:before{ content: "\f06e" }
.ipsNavBar_primary > ul > li[data-FontAwesome='My Activity Streams'] > a:before{ content: "\f015" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Content I Started'] > a:before{ content: "\f03a" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Our Picks'] > a:before{ content: "\f046" }

/* Add Icon on the secondary navigation bar */
.ipsNavBar_secondary > li[data-FontAwesome='Browse'] > a:before{ content: "\f0ac" }
.ipsNavBar_secondary > li[data-FontAwesome='Store'] > a:before{ content: "\f07a" }
.ipsNavBar_secondary > li[data-FontAwesome='Support'] > a:before{ content: "\f1cd" }
.ipsNavBar_secondary > li[data-FontAwesome='Forums'] > a:before{ content: "\f086" }
.ipsNavBar_secondary > li[data-FontAwesome='Gallery'] > a:before{ content: "\f030" }
.ipsNavBar_secondary > li[data-FontAwesome='Downloads'] > a:before{ content: "\f019" }
.ipsNavBar_secondary > li[data-FontAwesome='Articles'] > a:before{ content: "\f15c" }
.ipsNavBar_secondary > li[data-FontAwesome='Blogs'] > a:before{ content: "\f02d" }
.ipsNavBar_secondary > li[data-FontAwesome='Calendar'] > a:before{ content: "\f073" }
.ipsNavBar_secondary > li[data-FontAwesome='Chat'] > a:before{ content: "\f27a" }
.ipsNavBar_secondary > li[data-FontAwesome='Online Users'] > a:before{ content: "\f2ce" }
.ipsNavBar_secondary > li[data-FontAwesome='Activity'] > a:before{ content: "\f135" }
.ipsNavBar_secondary > li[data-FontAwesome='Search'] > a:before{ content: "\f002" }
.ipsNavBar_secondary > li[data-FontAwesome='Todays Activities'] > a:before{ content: "\f06e" }
.ipsNavBar_secondary > li[data-FontAwesome='My Searches'] > a:before{ content: "\f00e" }
.ipsNavBar_secondary > li[data-FontAwesome='Unread Content'] > a:before{ content: "\f111" }
.ipsNavBar_secondary > li[data-FontAwesome='My Created Content'] > a:before{ content: "\f005" }
.ipsNavBar_secondary > li[data-FontAwesome='Guidelines'] > a:before{ content: "\f0e3" }
.ipsNavBar_secondary > li[data-FontAwesome='Tutorials'] > a:before{ content: "\f19d" }
.ipsNavBar_secondary > li[data-FontAwesome='Staff'] > a:before{ content: "\f132" }
.ipsNavBar_secondary > li[data-FontAwesome='Clubs'] > a:before{ content: "\f0c0" }
.ipsNavBar_secondary > li[data-FontAwesome='Leaderboard'] > a:before{ content: "\f091" }
.ipsNavBar_secondary > li[data-FontAwesome='All Activity'] > a:before{ content: "\f06e" }
.ipsNavBar_secondary > li[data-FontAwesome='My Activity Streams'] > a:before{ content: "\f015" }
.ipsNavBar_secondary > li[data-FontAwesome='Content I Started'] > a:before{ content: "\f03a" }
.ipsNavBar_secondary > li[data-FontAwesome='Our Picks'] > a:before{ content: "\f046" }

/* Add Icon on the user bar */

/* Profile */
#elUserLink_menu > li[data-menuItem='profile'] > a:before{ content: "\f007" }

/* Attachments */
#elUserLink_menu > li[data-menuItem='attachments'] > a:before{ content: "\f0c6" }

/* Followed Content */
#elUserLink_menu > li[data-menuItem='manageFollowed'] > a:before{ content: "\f1d8" }

/* Administrator Panel */
#elUserLink_menu > li[data-menuItem='content'] > a:before{ content: "\f03a" }

/* Account Configurations */
#elUserLink_menu > li[data-menuItem='settings'] > a:before{ content: "\f013" }

/* Mod Panel */
#elUserLink_menu > li[data-menuItem='modcp'] > a:before{ content: "\f132" }

/* Admin Panel */
#elUserLink_menu > li[data-menuItem='admincp'] > a:before{ content: "\f023" }

/* Logout */
#elUserLink_menu > li[data-menuItem='signout'] > a:before{ content: "\f08b" }

/* Clients */
#elUserLink_menu a[href*="/clients/"]:before{ content: "\f07a" }

/* Edit */
#elUserLink_menu > li[data-menuItem='edit'] > a:before{ content: "\f040" }

/* Ignored Users */
#elUserLink_menu > li[data-menuItem='ignoredUsers'] > a:before{ content: "\f235" }

/* Options */
#elUserLink_menu > li[data-menuItem='options'] > a:before{ content: "\f0ac" }

/* Messages */
#elUserLink_menu > li[data-menuItem='messages'] > a:before{ content: "\f01c" }

/* Add Icon on create bar */

/* Default icon that is displayed if you do not add */
#elCreateNew_menu a:before{ content: "\f0fe" }

/* Announcement */
#elCreateNew_menu a[href*="/announcements/"]:before{ content: "\f0a1" }

/* Update Status */
#elCreateNew_menu a[href*="module=status"]:before{ content: "\f021" }

/* Member Notes */
#elCreateNew_menu a[href*="module=notes"]:before{ content: "\f14b" }

/* IPS Downloads */
#elCreateNew_menu a[href*="/files/"]:before { content:"\f019" }

/* IPS Gallery */
#elCreateNew_menu a[href*="/gallery/"]:before { content:"\f030" }

/* IPS Blogs */
#elCreateNew_menu a[href*="/blogs/"]:before { content:"\f02d" }

/* Tutorials */
#elCreateNew_menu a[href*="/tutorials/"]:before { content:"\f19d" }

/* IPS Calendar*/
#elCreateNew_menu a[href*="/calendar/"]:before { content:"\f073" }


/* Create new topic , I stopped two ways to work if the forum has at the root folder or forum*/
#elCreateNew_menu a[href*="/index.php?/submit/"]:before { content:"\f075" }
#elCreateNew_menu a[href*="/forums/"]:before { content:"\f075" }
#elCreateNew_menu a[href*="/index.php?/submit/"]:before { content:"\f075" }

Replace code in Customization > Theme > Edit html/css > Templates > navBarItems

{{$first = TRUE;}}
{{foreach $roots as $id => $item}}
	{{if $preview or $item->canView()}}
		{{$active = $preview ? $first : $item->activeOrChildActive();}}
		{{if $active}}
			{{\IPS\core\FrontNavigation::i()->activePrimaryNavBar = $item->id;}}
		{{endif}}
		<li {{if $active}}class='ipsNavBar_active' data-active{{endif}} id='elNavSecondary_{$item->id}' data-role="navBarItem" data-navApp="{expression="mb_substr( get_class( $item ), 4, mb_strpos( get_class( $item ), '\\', 4 ) - 4 )"}" data-navExt="{expression="mb_substr( get_class( $item ), mb_strrpos( get_class( $item ), '\\' ) + 1 )"}" data-FontAwesome="{$item->title()}">
			{{$children = $item->children();}}
			{{if $children}}
				<a href="{{if $item->link()}}{$item->link()}{{else}}#{{endif}}" id="elNavigation_{$id}" data-ipsMenu data-ipsMenu-appendTo='#{{if $parent}}elNavSecondary_{$parent}{{else}}elNavSecondary_{$id}{{endif}}' data-ipsMenu-activeClass='ipsNavActive_menu' data-navItem-id="{$item->id}" {{if $active}}data-navDefault{{endif}}>
					{$item->title()} <i class="fa fa-caret-down"></i>
				</a>
				<ul id="elNavigation_{$id}_menu" class="ipsMenu ipsMenu_auto ipsHide">
					{template="navBarChildren" app="core" group="global" location="front" params="$children, $preview"}
				</ul>
			{{else}}
				<a href="{{if $item->link()}}{$item->link()}{{else}}#{{endif}}" {{if method_exists( $item, 'target' ) AND $item->target()}}target='{$item->target()}'{{endif}} data-navItem-id="{$item->id}" {{if $active}}data-navDefault{{endif}}>
					{$item->title()}
				</a>
			{{endif}}
			{{if $subBars && isset( $subBars[ $id ] ) && count( $subBars[ $id ] )}}
				<ul class='ipsNavBar_secondary {{if !$active}}ipsHide{{endif}}' data-role='secondaryNavBar'>
					{template="navBarItems" app="core" group="global" location="front" params="$subBars[ $id ], NULL, $item->id, $preview"}
					<li class='ipsHide' id='elNavigationMore_{$id}' data-role='navMore'>
						<a href='#' data-ipsMenu data-ipsMenu-appendTo='#elNavigationMore_{$id}' id='elNavigationMore_{$id}_dropdown'>{lang="more"} <i class='fa fa-caret-down'></i></a>
						<ul class='ipsHide ipsMenu ipsMenu_auto' id='elNavigationMore_{$id}_dropdown_menu' data-role='moreDropdown'></ul>
					</li>
				</ul>
			{{endif}}
		</li>
	{{endif}}
	{{$first = FALSE;}}
{{endforeach}}

I use this code in my website but i lost who make code ?

0

Share this post


Link to post
Share on other sites

What do you think? Remember the human.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.