Fontawesome as menu icons

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

Post Reply
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Fontawesome as menu icons

Post by Tata » Wed Mar 14, 2018 6:42 pm

I wonder how is it possible/what and where shall be modified to have the font icons within the page title in menu.
Is is simple to have the in page heading. But generated menu links do not show them.
If this would be possible, my intention is to use one more option for viewtopic.php?f=12&t=13548&start=20#p65827.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Fontawesome as menu icons

Post by lck » Wed Mar 14, 2018 8:08 pm

Tata wrote:
Wed Mar 14, 2018 6:42 pm
I wonder how is it possible/what and where shall be modified to have the font icons within the page title in menu.
One way is per css:

Code: Select all

.menulevel1 li:nth-child(n) a:before,
.menulevel1 li:nth-child(n) span:before {
	color: #fff;
	display: block;
	font: 3em FontAwesome;
	padding: 0;
	position: relative;
	text-align: center;
}
.menulevel1 li:nth-child(1) a:before,
.menulevel1 li:nth-child(1) span:before {
	content: "\f015";	
}

.menulevel1 li:nth-child(2) a:before,
.menulevel1 li:nth-child(2) span:before {
	content: "\f1b9";
}
.menulevel1 li:nth-child(3) a:before,
.menulevel1 li:nth-child(3) span:before {
	content: "\f1f8";
}

/* and so on ... */
Another way is Christophs Toxic_XH
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Fontawesome as menu icons

Post by Tata » Wed Mar 14, 2018 8:30 pm

It is not what I mean. Better explanation is here.
The icons in headings are fine. They are not taken into the menu item.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Fontawesome as menu icons

Post by cmb » Wed Mar 14, 2018 10:04 pm

Tata wrote:
Wed Mar 14, 2018 8:30 pm
It is not what I mean. Better explanation is here.
The icons in headings are fine. They are not taken into the menu item.
Well, all HTML tags are stripped from the page headings (for the menu, and other purposes as well), so these FA icons will be lost. You could insert the FA icons with the respective character code instead of <span>s, but even that would get rather tricky (if possible at all).
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Fontawesome as menu icons

Post by Tata » Wed Mar 14, 2018 10:35 pm

I assume it would require modification in one of core functions. Maybe with some option in metaconfig/config?
I also tried to find a PHP function for getting this icon from the page title to use it in the modified expandcontract plugin for generation of a clickable icon instead of the image icon I added to the plugin. But didn't find the way how to extract the <span class="fa ..."></span> or <i>...</i>.
cmb wrote:You could insert the FA icons with the respective character code instead of <span>s, but even that would get rather tricky (if possible at all).
I'll will try it on weekend.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Fontawesome as menu icons

Post by cmb » Thu Mar 15, 2018 6:20 pm

Tata wrote:
Wed Mar 14, 2018 10:35 pm
I also tried to find a PHP function for getting this icon from the page title to use it in the modified expandcontract plugin for generation of a clickable icon instead of the image icon I added to the plugin. But didn't find the way how to extract the <span class="fa ..."></span> or <i>...</i>.
That's somewhat tricky, since you'd have to parse the content of the page yourself. Perhaps the following will already do:

Code: Select all

preg_match_all('/class="fa (.*?)"/', $c[$s], $matches);
var_dump($matches[1]);
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply