Custom Folder icon on Jet Theme

We all want to see beautiful designs on each of our websites.

Just through some CSS, HTML, JavaScript, we make our website beautiful so that visitors are attracted to our website.

In that continuation, we will work today on how to add folder icons, before a tag category for our blogger website.

It will basically work on the blogger template jet template.

But it is very easy and understandable for everyone.

We will first enter our HTML template.

Next find /*Your custom CSS is here*/ This

  /*Your custom CSS is here*/

At the bottom of the found text, add the following CSS.

  /* categories Folder */
.categories ul li a{font-size:13px}
.categories ul li a:hover{color:#222}
.categories ul{margin-bottom:0.5rem !important}
.categories ul li{position:relative;list-style:none;padding-left:1.5em}
.categories ul li::before{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" fill="orange" viewBox="0 0 512 512"><path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"/></svg>');position:absolute;left:0;top:65%;transform:translateY(-50%)}
.categories ul li:hover::before{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" fill="orange" viewBox="0 0 576 512"><path d="M88.7 223.8L0 375.8V96C0 60.7 28.7 32 64 32H181.5c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7H416c35.3 0 64 28.7 64 64v32H144c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224H544c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480H32c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z"/></svg>');position:absolute;left:0;top:65%;transform:translateY(-50%)}

Now save the Blogger template team, visit the website and see that our work is done.