Add an icon next to site name in PageSpeed WordPress theme

This recipe goes well with the sleek header, you can try it with the regular header too.

The sleek header is 64px tall with the site title @48px. We will use an icon that is 64px tall to match the header height and add 5px padding at top and bottom as a part of the image. Feel free to increase or decrease the padding.

Add the following CSS to the Additional CSS field in the customizer. Changes the left padding to match your icon width+10px

.site-title{
padding-left:60px;
background:url('http://localhost/helium/wp-content/uploads/2018/05/sleek-header-icon.png') no-repeat 0 50%;
}
Result of adding the above CSS to Additional CSS.

For a perfect looking icon

  1. Use an SVG or png with transparent background.
  2. Use something with little details so that the icon is clear.

One Reply to “Add an icon next to site name in PageSpeed WordPress theme”

Leave a Reply

Your email address will not be published. Required fields are marked *