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: 46
Joined: Sun Feb 10, 2019 7:11 am
Contact:

navbar home icon

Post by NevesProjects » 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
Visit http://nevesprojects.com/ for all HTML5 Game Downloads

User avatar
</Solidjeuh>
Registered User
Posts: 1548
Joined: Tue Mar 29, 2016 3:45 am
Location: Aalst (Belgium)
Name: Andy Dm
Contact:

Re: navbar home icon

Post by </Solidjeuh> » Wed Mar 06, 2019 12:08 am

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.
Register a free account & Play!!
~~~ https://www.solidjeuh.be ~~~
Have a secret? --> https://www.tellyoursecrets.eu

User avatar
Prosk8er
Registered User
Posts: 1444
Joined: Sun Mar 12, 2006 3:30 am
Location: Rochester, NY
Name: Tyler
Contact:

Re: navbar home icon

Post by Prosk8er » Wed Mar 06, 2019 12:11 am

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: 46
Joined: Sun Feb 10, 2019 7:11 am
Contact:

Re: navbar home icon

Post by NevesProjects » Wed Mar 06, 2019 1:13 am

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: 66242
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: navbar home icon

Post by Lumpy Burgertushie » Wed Mar 06, 2019 3:04 am

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
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

User avatar
NevesProjects
Registered User
Posts: 46
Joined: Sun Feb 10, 2019 7:11 am
Contact:

Re: navbar home icon

Post by NevesProjects » Wed Mar 06, 2019 5:55 am

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: 1444
Joined: Sun Mar 12, 2006 3:30 am
Location: Rochester, NY
Name: Tyler
Contact:

Re: navbar home icon

Post by Prosk8er » Wed Mar 06, 2019 2:16 pm

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: 46
Joined: Sun Feb 10, 2019 7:11 am
Contact:

Re: navbar home icon

Post by NevesProjects » Wed Mar 06, 2019 6:18 pm

Thanks Prosk8er
How did you put the image there ?
Visit http://nevesprojects.com/ for all HTML5 Game Downloads

User avatar
Prosk8er
Registered User
Posts: 1444
Joined: Sun Mar 12, 2006 3:30 am
Location: Rochester, NY
Name: Tyler
Contact:

Re: navbar home icon

Post by Prosk8er » Thu Mar 07, 2019 12:18 am

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: 46
Joined: Sun Feb 10, 2019 7:11 am
Contact:

Re: navbar home icon

Post by NevesProjects » Fri Mar 08, 2019 7:20 pm

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: 889
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: navbar home icon

Post by Hanakin » Fri Mar 08, 2019 7:47 pm

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
Donations welcome via Paypal Image

User avatar
Talk19Zehn
Registered User
Posts: 315
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: navbar home icon

Post by Talk19Zehn » Sat Mar 09, 2019 12:17 am

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
World Meteorological Organization (WMO) Weather - Climate - Water
BTW: My own works - phpBB - read more: ongray-design-de

Post Reply

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