CSS with Font Awesome

Asked

Viewed 92 times

0

How to replace the image of the CSS example available in https://pastebin.com/Bm1k1Pjs by Font Awesome?

Follows code below:

<blockquote style=' font: 14px/20px italic Times, serif; padding-left: 70px; padding-top: 18px; padding-bottom: 18px; padding-right: 10px; background-color: #dadada; border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc; margin: 5px; background-image: url(images/openquote4.gif); background-position: middle left; background-repeat: no-repeat; text-indent: 23px;'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies nibh suscipit tincidunt pretium. Nulla diam tortor, mollis vitae risus sit amet, eleifend lobortis turpis. Curabitur volutpat erat a neque molestie, vel fermentum nulla tincidunt. Curabitur ultrices viverra augue ut mollis. Nunc pulvinar condimentum blandit. Nullam ligula erat, cursus vel elementum sit amet, mattis ut ipsum. Etiam mauris enim, ultrices quis lectus non, finibus vehicula enim. Curabitur semper sit amet elit vel cursus. Nullam mattis tortor quis justo cursus fermentum sed et est. Proin malesuada vehicula convallis.
</blockquote>
html5 css3 font-awesome

  • Add a visual reference to how you’re doing so we can reproduce more accurately.

  • As a visual reference, it is equivalent to the Fancy quote of this url: https://css-tricks.com/examples/Blockquotes/. In this case I want to replace the image with awesome font, in order to insert only the CSS in the tag.

  • how is it in my reply? Just edit the position and size as desired

2 answers

1

I think this is the way to what you’re looking for.

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
blockquote
{
  font: 14px/20px italic Times, serif;
  padding-left: 70px;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-right: 10px;
  background-color: #dadada;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 5px;
  /*
  background-image: url(images/openquote4.gif);
  background-position: middle left; background-repeat: no-repeat;   
  */
  text-indent: 23px;
  
  
}

blockquote:before{ 
  font-family: "FontAwesome";
  font-size: 3em;
  content: "\f10d";
  position: absolute;
  top: 25px; 
  left: 5px;
}
<blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies nibh suscipit tincidunt pretium. Nulla diam tortor, mollis vitae risus sit amet, eleifend lobortis turpis. Curabitur volutpat erat a neque molestie, vel fermentum nulla tincidunt. Curabitur ultrices viverra augue ut mollis. Nunc pulvinar condimentum blandit. Nullam ligula erat, cursus vel elementum sit amet, mattis ut ipsum. Etiam mauris enim, ultrices quis lectus non, finibus vehicula enim. Curabitur semper sit amet elit vel cursus. Nullam mattis tortor quis justo cursus fermentum sed et est. Proin malesuada vehicula convallis. </blockquote>

1

For this just remove the properties:

background-image: url(images/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;

Import the CSS Font Awesome

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

Tag i with the desired icon class:

<i class="fa fa-quote-left" aria-hidden="true"></i>

See working:

blockquote {
  font: 14px/20px italic Times, serif;
  padding-left: 70px;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-right: 10px;
  background-color: #dadada;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 5px;
  text-indent: 23px;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<blockquote>
  <i class="fa fa-quote-left fa-x3" aria-hidden="true"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies nibh suscipit tincidunt pretium. Nulla diam tortor, mollis vitae risus sit amet, eleifend lobortis turpis. Curabitur volutpat erat a neque molestie, vel fermentum nulla tincidunt. Curabitur ultrices viverra augue ut mollis. Nunc pulvinar condimentum blandit. Nullam ligula erat, cursus vel elementum sit amet, mattis ut ipsum. Etiam mauris enim, ultrices quis lectus non, finibus vehicula enim. Curabitur semper sit amet elit vel cursus. Nullam mattis tortor quis justo cursus fermentum sed et est. Proin malesuada vehicula convallis.
</blockquote>

  • Great. And how do I insert fa-quote-left, through CSS?

  • content: "\f10d"; font-family: "FontAwesome";.

Browser other questions tagged html5 css3 font-awesome

You are not signed in. Login or sign up in order to post.