Blockquote icon selected is being replaced by line on left side

Question

In my joomla template, I selected an icon (the last one) for use as a blockquote symbol.  However, when the page is displayed, it does not show the icon but rather a gray line on the left side of the quote.  An examination in Google Chrome developer tools show a bootstrap class overriding the effect I want.

blockquote {

1. padding: 11px 22px;
2. margin: 0 0 22px;
3. font-size: 20px;
4. border-left: 5px solid #eeeeee;

}

I know how to remove the border, but that doesn't resolve the problem of the icon I want to appear on the page.

This is how it appears:

This is the effect I'm looking for (this is from the template file).

 

Answer 1

Hi,

Please send  URL to your website.

Comments

This bug should be fixed as soon as possible because it takes too much time to a developer.

 I found the solution (HTML template) that works at
http://stackoverflow.com/questions/20721248/best-way-to-override-bootstrap-css

In the head section of your html place your custom.css below bootstrap.css.

<link href="bootstrap.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

Then in custom.css you have to use the exact same selector for the element you want to override.
In the case of legend it just stays legend in your custom.css because bootstrap hasn't got any selectors more specific.