I wanted to add an Icon of Quotation Marks before the start of my paragraph, because I’ve seen this being done in some other websites.
So I tried to play a bit with the width
, height
& font-size
properties – But I can’t figure out how to scale that image down to fit the size of the paragraph.
HERE IS THE QM ICON: enter image description here
HERE ARE THE CODES:
<code>.article {
padding-top: 2%;
}
.article::before {
content: url(https://i.sstatic.net/mdeKRzYD.png);
display: inline-block;
/* top: 4px; */
/* float: left; */
/* width: 13px; */
font-size: 10px;
}</code>
<code>.article {
padding-top: 2%;
}
.article::before {
content: url(https://i.sstatic.net/mdeKRzYD.png);
display: inline-block;
/* top: 4px; */
/* float: left; */
/* width: 13px; */
font-size: 10px;
}</code>
.article {
padding-top: 2%;
}
.article::before {
content: url(https://i.sstatic.net/mdeKRzYD.png);
display: inline-block;
/* top: 4px; */
/* float: left; */
/* width: 13px; */
font-size: 10px;
}
<code><!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="article">
<p>Blah blah blah, some text to fill the space.</p>
</div>
</body>
</html></code>
<code><!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="article">
<p>Blah blah blah, some text to fill the space.</p>
</div>
</body>
</html></code>
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="article">
<p>Blah blah blah, some text to fill the space.</p>
</div>
</body>
</html>
3