CSS with Awesome Font

Navigation
0

How to replace the image from the CSS sample available at link by Font Awesome?

Follow the 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>
    
asked by anonymous 08.01.2018 / 13:50

2 answers

1

To do this, simply 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" />

Add the i tag to the desired icon class: 

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

See it 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>
    
08.01.2018 / 14:05
1

I think this is the path 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>
    
08.01.2018 / 14:02
Check last record of an sql table Add project already exists to github