Jump to content
dario

Font Awesome and Blockquotes

Recommended Posts

dario

Not having luck at all.

I do notice however that PL, in the 'Leave a Reply' heading for comments, uses a Font Awesome image (the pushpin). The CSS for that goes to a background image in a section folder, not a shortcode in an i tag. Why not use Font Awesome normally? guess that's a side issue though.

 

My intent is to use something like this on my block quotes:

<i class="icon-quote-left icon-4x pull-left icon-muted"></i>

No matter what I try I simply get a small square followed by the wording in the class, in this case: icon-quote-left icon-4x pull-left icon-muted.

Share this post


Link to post
Share on other sites
Rob

Okay, first, your use of the custom class is right, but the syntax in application is incorrect.

 

I don't think you can add all those classes into one class. Each is different.  You can compile them in the CSS, but not the <i class=".....">

Classes can not have a break in them, except - or _.

 

So the application of your custom CSS is just not applied correctly.  Did you try the docs at http://docs.pagelines.com/ ?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
dario

Yep, I read through this here (I've got to finish a current site with Framework, I'll move it to DMS once I get up to speed):

http://support.pagelines.me/docs/miscellaneous/font-awesome/

 

And quarter way down this page, under the Bordered & Pulled Icon area:

http://fortawesome.github.io/Font-Awesome/examples/

 

My original CSS was:

/* BLOCKQUOTE STYLING */
blockquote {
  padding: 0;
  margin: 20px;
  border-left: 0px;
}

blockquote p {
  margin-bottom: 0;
  font-size: 1em;
  font-style: italic;
}

blockquote:before {
  display: block;
  float: left;
  font-size: 150px;
  content: &#8220;
  color: #bababa;
  text-shadow: 0 5px 5px #909090;
}

blockquote:after {
  content: none;
}

Which of course gives me a LESS error and still the square.

Share this post


Link to post
Share on other sites
dario

Adding this to my header:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

And then this, just after a blockquote tag within a post:

<i class="icon-quote-left icon-4x pull-left icon-muted"></i>

Works.

 

But, there's got to be a way to make it automatic. You know, having the icon be part of the blockquote tag.

Share this post


Link to post
Share on other sites
Rob

All the instructions for using those icons is in our docs.  Honestly, I've not used them.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
dario

Understood.

My error seems to be in trying to use those icons on the blockquote tag via CSS.

Share this post


Link to post
Share on other sites
Rob

Dario,

 

I have those days, and lately, every day. :D

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×