Skip to main content
Topic: Quote Style with Font Awesome (Read 3004 times) previous topic - next topic
0 Members and 1 Guest are viewing this 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.