Skip to main content ↑ ↓
Quote Style with Font Awesome Started by Spuds · · Read 5884 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Quote Style with Font Awesome

I was playing around with quote block styling and figured out how to add font awesome as a pseudo.  I'd imagine this is obvious to you css masters but figured I'd share.

Code: [Select]
div[class^="quoteheader"]:before, div[class^="quoteheader"]:after {
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	text-decoration: inherit;
	color: #e2e2e2;
	font-size: 1.5em;
}
That applys the FontAwesome font to the before and after pseduo's on classes that start with quoteheader
Code: [Select]
.quoteheader::before {
	content: "\f10e";
	float: right;
	transform: rotate(-30deg);
}
.quoteheader::after {
	content: "\f10d\00a0\00a0";
	float:right;
	transform: rotate(-30deg);
}
Thats just a demo, it adds the right and left quote symbols and rotates them as an example of things you can do.
Last Edit: November 03, 2014, 08:34:14 pm by Spuds

Re: Quote Style with Font Awesome

Reply #1 –

Quality work @Spuds . :thumbsup:

Re: Quote Style with Font Awesome

Reply #2 –

That's awesome :D I love the amount of stuff that's possible with icon fonts.

I overhauled the quote display entirely, using the HTML5 <cite> tag, although that required alterations to Subs.php unfortunately :(

Re: Quote Style with Font Awesome

Reply #3 –

Why? You should be able to do it with hooks on BBC.

Re: Quote Style with Font Awesome

Reply #4 –

Quote from: Joshua Dickerson – Why? You should be able to do it with hooks on BBC.

That would be great. How can I go about doing that? Is there documented list of hooks anywhere?

Re: Quote Style with Font Awesome

Reply #5 –

Unfortunately the hooks documentation is still something to do... and is a pain of a problem. :'(

After reading this I decided to post a quick and very dirty grep of the (to be) 1.0.2 code:
http://www.elkarte.net/community/index.php?topic=2192.0
Bugs creator.
Features destroyer.
Template killer.

Re: Quote Style with Font Awesome

Reply #6 –

That said, in order to change a bbcode, you have anyway to rely on a trick...
You can use the integrate_pre_parsebbc hook, and loop through all the bbcodes looking for the quote tag (or maybe use array_filter with a callback), remove both and then add yours.
Bugs creator.
Features destroyer.
Template killer.
 

Re: Quote Style with Font Awesome

Reply #7 –

You can see the trick in action in the fancybox addon, I just do a loop on the BBC codes and change the actions of the one I want, in that case how IMG tags are rendered.