navbar home icon

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
NevesProjects
Registered User
Posts: 50
Joined: Sun Feb 10, 2019 7:11 am
Contact:

navbar home icon

Post by NevesProjects »

Hi
this probably has been asked but Iv'e search and all i can find is how to add icons/links to header.

I would like to change the icon image for home in the navbar, i cannot find that image anywhere in the image files so i can replace it.

also i would like to add an icon to the forum link, please see attached pic

Image

can anyone help me wth this ?
thanks
Visit http://nevesprojects.com/ for all HTML5 Game Downloads
User avatar
</Solidjeuh>
Registered User
Posts: 1788
Joined: Tue Mar 29, 2016 3:45 am
Location: Aalst (Belgium)
Name: Andy Dm
Contact:

Re: navbar home icon

Post by </Solidjeuh> »

Those are "Font Awesome icons". Located in: /styles/prosilver/template/navbar_header.html

<i class="icon fa-home fa-fw" aria-hidden="true">
"icon fa-home fa-fw" ----> home is the name of the icon

Icons: https://fontawesome.com/v4.7.0/icons/
Last edited by </Solidjeuh> on Wed Mar 06, 2019 12:11 am, edited 1 time in total.
User avatar
Prosk8er
Registered User
Posts: 1744
Joined: Sun Mar 12, 2006 3:30 am
Location: Rochester, NY
Name: Tyler
Contact:

Re: navbar home icon

Post by Prosk8er »

NevesProjects wrote: Tue Mar 05, 2019 10:45 pm Hi
this probably has been asked but Iv'e search and all i can find is how to add icons/links to header.

I would like to change the icon image for home in the navbar, i cannot find that image anywhere in the image files so i can replace it.

also i would like to add an icon to the forum link, please see attached pic

Image

can anyone help me wth this ?
thanks
the images are font awesome
example usage in styles/prosilver/template/navbar_header.html

Code: Select all

<i class="icon fa-home fa-fw"
so if you go to font awesome website https://fontawesome.com/v4.7.0/icons/ and find a different icon you like to use you would just change this part

Code: Select all

fa-home
to something like

Code: Select all

fa-university
or which ever icon you choose

and for the > in the same file find

Code: Select all

<span class="crumb" {$MICRODATA}<!-- IF navlinks.MICRODATA --> {navlinks.MICRODATA}<!-- ENDIF -->><a href="{navlinks.U_VIEW_FORUM}" itemprop="url"><span itemprop="title">{navlinks.FORUM_NAME}</span></a></span>
Last edited by Prosk8er on Thu Mar 07, 2019 1:53 am, edited 1 time in total.
User avatar
NevesProjects
Registered User
Posts: 50
Joined: Sun Feb 10, 2019 7:11 am
Contact:

Re: navbar home icon

Post by NevesProjects »

Thanks for your replies'
but is their a way to put an icon that i created or will that take a lot of file editing ?
Visit http://nevesprojects.com/ for all HTML5 Game Downloads
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: navbar home icon

Post by Lumpy Burgertushie »

navbar_header.html

find:


<i class="icon fa-home fa-fw" aria-hidden="true"></i>

replace with:

<img src="{T_THEME_PATH}/images/icon_download.gif">

put the image you want to use in the styles/yourstyle/theme/images folder
and that link will work.

however, I would suggest you just find a font awesome icon that you like instead of trying to put an actual image there.

don't see what difference it makes for just that one icon.

robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
User avatar
NevesProjects
Registered User
Posts: 50
Joined: Sun Feb 10, 2019 7:11 am
Contact:

Re: navbar home icon

Post by NevesProjects »

Thanks Lumpy
Maybe your right, I don't mind keeping the home icon that's there but as you can see from the pic i posted, I also wanted to add an icon
to the forum link
Image
Visit http://nevesprojects.com/ for all HTML5 Game Downloads
User avatar
Prosk8er
Registered User
Posts: 1744
Joined: Sun Mar 12, 2006 3:30 am
Location: Rochester, NY
Name: Tyler
Contact:

Re: navbar home icon

Post by Prosk8er »

read the bottom of my post you could put a image where the > is or a font awesome icon
User avatar
NevesProjects
Registered User
Posts: 50
Joined: Sun Feb 10, 2019 7:11 am
Contact:

Re: navbar home icon

Post by NevesProjects »

Thanks Prosk8er
How did you put the image there ?
Visit http://nevesprojects.com/ for all HTML5 Game Downloads
User avatar
Prosk8er
Registered User
Posts: 1744
Joined: Sun Mar 12, 2006 3:30 am
Location: Rochester, NY
Name: Tyler
Contact:

Re: navbar home icon

Post by Prosk8er »

NevesProjects wrote: Wed Mar 06, 2019 6:18 pm Thanks Prosk8er
How did you put the image there ?
now that i look at it again its actually just css

styles/prosilver/theme/common.css

Code: Select all

.breadcrumbs .crumb:before {
    content: '\2039';
    font-weight: bold;
    padding: 0 0.5em;
}
User avatar
NevesProjects
Registered User
Posts: 50
Joined: Sun Feb 10, 2019 7:11 am
Contact:

Re: navbar home icon

Post by NevesProjects »

I already have that there,
do I need to add to it ?
Visit http://nevesprojects.com/ for all HTML5 Game Downloads
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: navbar home icon

Post by Hanakin »

if you created an icon that is vector in the current version you can use custom font generation tools to add yours to it as well. check out https://icomoon.io/ just another option that limites the ammount of code you will need
User avatar
Talk19Zehn
Registered User
Posts: 846
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: navbar home icon

Post by Talk19Zehn »

Hi, or create a new class ==> additional.css (!)

*)

Code: Select all

.icon-board-crumb {
    background-image: url("./images/icon_download.gif");
    padding-left: 16px;
}
your icon is 13x12px (high(12px)) = an example with icon_download.gif = and now go into your navbar_header.html

find:

Code: Select all

<span class="crumb" {$MICRODATA}><a href="{U_INDEX}" itemprop="url" accesskey="h" data-navbar-reference="index"><!-- IF not U_SITE_HOME --><i class="icon fa-home fa-fw"></i><!-- ENDIF --><span itemprop="title">{L_INDEX}</span></a></span>
change this line to:

Code: Select all

<span class="crumb" {$MICRODATA}><a href="{U_INDEX}" itemprop="url" accesskey="h" data-navbar-reference="index" class="small-icon icon-board-crumb"><!-- IF not U_SITE_HOME --><i class="icon fa-home fa-fw"></i><!-- ENDIF --><span itemprop="title">{L_INDEX}</span></a></span>
It might work, regards



Edit: @NevesProjects
The *)proposal applies only if it is your Homepagelink (look into the ACP).

If you use the B3P, the extension "Board3Portal" automatically adds the icon to the index. I would think that you may have made changes in the B3P-Ext. Is that correct? If yes, which?

Regards
Best regards
phpBB3 Designs - My own works: Stylearea Ongray-Designs, Adventinducement-Calendar for phpBB
Post Reply

Return to “[3.2.x] Styles Support & Discussion”