Image Entry-title svg/png

[antoine_generau]

Hello,

I’d like to change the entry-title for the blog post. As an image in format .png would not be good enough, I tried to use an SVG image but I encounter some problems. I can see two solutions:

1. Use an PNG image and scale it to display it in smaller dimension (in order not to loose the quality of the image)
2. Use an SVG image and scale it to the proper dimansion.

I however did not manage to make one of those solution to work as I guess my coding skills are not good enough yet

I have this code:
.format-standard .entry-title:before {
content: url(’/image.png’);
}

How can I scale the image if used in PNG?
How can I scale the image if used in SVG?

Thanks,
Antoine

[basanta]

Hi There,

Thanks for writing in!

Instead of using the image please use the image as the background so that you can able to scale it through CSS.
There is no way to scale an image whether it SVG Or PNG through CSS when you have added it via content:url(imagepath).

Please check this reference CSS.

.format-standard .entry-title:before  {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

You can use SVG for better performance in scaling!
Hope this helps!

Thanks

[jumar]

Hello @Camilletra,

Thanks for writing in!

In your case, I would suggest you use SVG over PNG as quality-wise, it gives more pixel precision than PNG. Reasons can be seen on the articles below:

• https://watb.co.uk/5-reasons-you-should-be-using-svgs-over-pngs/

• https://stackoverflow.com/questions/24433640/svg-icons-vs-png-icons-in-modern-web-sites

Here’s a tutorial you can check on adding an icon beside post title:

How to Add an Icon Before a Post Title in WordPress

An alternative option for the image, is to use FontAwesome icons. FontAwesome is already bundled on our themes. Below is an example on how to use the code:

.entry-title {
    position:relative;
}    
entry-title:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

Make sure to set position:relative; on your actual text wrapper for the positioning to work.

If the icon is not showing up, here’s a tutorial on how to load FontAwesome on Wordpress: https://alienwp.com/font-awesome-wordpress-guide/

Hope that helps you get started.