Problem with Correct format for setting Psuedo CSS element with SVG URL

Question

I am trying to source an SVG as content for a before psuedo element.

I have successfully added svgs to my menus using this code:

<svg ><use xlink:href="http://localhost:81/pinkequine/wp-content/themes/pinkequine-new/img/symbol-defs.svg#icon-star-full"></use></svg>

The problem is, when I want to put the URL into CSS for a Pseudo element, (I've checked lots of answers on here), its just not working for me, so I must be doing something wrong, please can anyone help.

I have tried:

Adding the URL as a background image

background:url(http://localhost:81/pinkequine/wp-content/themes/pinkequine-new/img/symbol-defs.svg#icon-star-full);

Adding the SVG as content base 64

content: url("data:application/font-woff;charset=utf-8;base64, PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgo8dGl0bGU+c3Rhci1mdWxsPC90aXRsZT4KPHBhdGggZD0iTTMyIDEyLjQwOGwtMTEuMDU2LTEuNjA3LTQuOTQ0LTEwLjAxOC00Ljk0NCAxMC4wMTgtMTEuMDU2IDEuNjA3IDggNy43OTgtMS44ODkgMTEuMDExIDkuODg5LTUuMTk5IDkuODg5IDUuMTk5LTEuODg5LTExLjAxMSA4LTcuNzk4eiI+PC9wYXRoPgo8L3N2Zz4K");

Encloding the SVG into base 64 font

  @font-face {
    font-family:star-full;
    src: url("data:application/font-woff;charset=utf-8;base64, PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgo8dGl0bGU+c3Rhci1mdWxsPC90aXRsZT4KPHBhdGggZD0iTTMyIDEyLjQwOGwtMTEuMDU2LTEuNjA3LTQuOTQ0LTEwLjAxOC00Ljk0NCAxMC4wMTgtMTEuMDU2IDEuNjA3IDggNy43OTgtMS44ODkgMTEuMDExIDkuODg5LTUuMTk5IDkuODg5IDUuMTk5LTEuODg5LTExLjAxMSA4LTcuNzk4eiI+PC9wYXRoPgo8L3N2Zz4K");
    font-weight: 400;
    font-style: normal;
  }
  
  p.stars a::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    content:' ';
    font-family:star-full;
    font-size:1rem;
    
    text-indent: 0;
}

<p class="stars">   Star    Ratings             <span>                          

<a class="star-1" href="#">1</a>                            
<a class="star-2" href="#">2</a>                            
<a class="star-3" href="#">3</a>                            
<a class="star-4" href="#">4</a>                            
<a class="star-5" href="#">5</a>                        
</span>                 
</p>

Problem with Correct format for setting Psuedo CSS element with SVG URL

0 Answers0