How do I display a Bootstrap 4 SVG icon in a button with a CSS class?

user_7969814 0
Viewed 4969

I am using Bootstrap 4's SVG icons in my buttons. I have the code working with the SVG hardcoded into the page's HTML. Now I want to refactor the SVG into a CSS class. I have followed the Bootstrap 4 instructions for creating the CSS class but I cannot work out how to display the icon on my button. I've tried a lot of variations without success.

CSS:

.bi::before {
    display: inline-block;
    content: "";
    background-image: url('data:image/svg+xml,<svg width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"><path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></svg>');
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
}

HTML:

<a href="#" class="btn bi" role="button" download></a>

Your help is greatly appreciated.

icons button svg css html
3 Answers

Well, to make your code work, there is a couple of note you should consider it.

  • First off, the <path> element within your SVG does not have any closing tag, so it will produce an error in the data attribute and it will prevent the icon to be shown.
  • To make your SVG responsive friendly it and fill the available space in the container it is better to avoid using width and height directly in the SVG element and use preserveAspectRatio="none" instead.
  • It is better to encode your SVG element instead of putting it directly within the data:image/svg to provide a valid string format for cross browsing purposes. You can use tools like this for the cause.

According to the above notes, your final code should be something like this:

.bi::before {
  content: "";
  display: inline-block;
  background-image: url('data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M.5%209.9a.5.5%200%200%201%20.5.5v2.5a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1v-2.5a.5.5%200%200%201%201%200v2.5a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2v-2.5a.5.5%200%200%201%20.5-.5z%22%20%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.646%2011.854a.5.5%200%200%200%20.708%200l3-3a.5.5%200%200%200-.708-.708L8.5%2010.293V1.5a.5.5%200%200%200-1%200v8.793L5.354%208.146a.5.5%200%201%200-.708.708l3%203z%22%20%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  width: 2rem;
  height: 2rem;
}
<a href="#" class="btn bi" role="button" download></a>

NOTE: You can also create an SVG file in your project and then directly refer to it in your background image property like regular images for easier usage.

user_119085020

You can add an tag inside the or tag and apply the class to it. You can try to do it without the pseudoclass. Also you can adjust the icon in the button adding padding to the button.

user_141735780

the same question here.in my case i used this method (one of others) in my demo with my fastest php framework in the world (i use similar bootstrap buttons to change the language in the page)

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="Custa">
  <title>Document</title>
  <style>
    .flcn{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI1NiIgZmlsbD0iI2Q4MDAyNyIvPjxwYXRoIGZpbGw9IiNmZmRhNDQiIGQ9Ik0xNDAuMSAxNTUuOGwyMi4xIDY4aDcxLjVsLTU3LjggNDIuMSAyMi4xIDY4LTU3LjktNDItNTcuOSA0MiAyMi4yLTY4LTU3LjktNDIuMUgxMTh6bTE2My40IDI0MC43bC0xNi45LTIwLjgtMjUgOS43IDE0LjUtMjIuNS0xNi45LTIwLjkgMjUuOSA2LjkgMTQuNi0yMi41IDEuNCAyNi44IDI2IDYuOS0yNS4xIDkuNnptMzMuNi02MWw4LTI1LjYtMjEuOS0xNS41IDI2LjgtLjQgNy45LTI1LjYgOC43IDI1LjQgMjYuOC0uMy0yMS41IDE2IDguNiAyNS40LTIxLjktMTUuNXptNDUuMy0xNDcuNkwzNzAuNiAyMTJsMTkuMiAxOC43LTI2LjUtMy44LTExLjggMjQtNC42LTI2LjQtMjYuNi0zLjggMjMuOC0xMi41LTQuNi0yNi41IDE5LjIgMTguN3ptLTc4LjItNzNsLTIgMjYuNyAyNC45IDEwLjEtMjYuMSA2LjQtMS45IDI2LjgtMTQuMS0yMi44LTI2LjEgNi40IDE3LjMtMjAuNS0xNC4yLTIyLjcgMjQuOSAxMC4xeiIvPjwvc3ZnPg==); }.flde{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZkYTQ0IiBkPSJNMTYgMzQ1YTI1NiAyNTYgMCAwIDAgNDgwIDBsLTI0MC0yMi4yTDE2IDM0NXoiLz48cGF0aCBmaWxsPSIjMzMzIiBkPSJNMjU2IDBBMjU2IDI1NiAwIDAgMCAxNiAxNjdsMjQwIDIyLjJMNDk2IDE2N0EyNTYgMjU2IDAgMCAwIDI1NiAweiIvPjxwYXRoIGZpbGw9IiNkODAwMjciIGQ9Ik0xNiAxNjdhMjU1LjUgMjU1LjUgMCAwIDAgMCAxNzhoNDgwYTI1NS40IDI1NS40IDAgMCAwIDAtMTc4SDE2eiIvPjwvc3ZnPg==); }.fles{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZkYTQ0IiBkPSJNMCAyNTZjMCAzMS4zIDUuNiA2MS4zIDE2IDg5bDI0MCAyMi4zTDQ5NiAzNDVhMjU1LjUgMjU1LjUgMCAwIDAgMC0xNzhsLTI0MC0yMi4zTDE2IDE2N2EyNTUuNSAyNTUuNSAwIDAgMC0xNiA4OXoiLz48cGF0aCBmaWxsPSIjZDgwMDI3IiBkPSJNNDk2IDE2N2EyNTYgMjU2IDAgMCAwLTQ4MCAwaDQ4MHpNMTYgMzQ1YTI1NiAyNTYgMCAwIDAgNDgwIDBIMTZ6Ii8+PC9zdmc+); }.flfr{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI1NiIgZmlsbD0iI2VlZSIvPjxwYXRoIGZpbGw9IiNkODAwMjciIGQ9Ik01MTIgMjU2QTI1NiAyNTYgMCAwIDAgMzQ1IDE2djQ4MGEyNTYgMjU2IDAgMCAwIDE2Ny0yNDB6Ii8+PHBhdGggZmlsbD0iIzAwNTJiNCIgZD0iTTAgMjU2YTI1NiAyNTYgMCAwIDAgMTY3IDI0MFYxNkEyNTYgMjU2IDAgMCAwIDAgMjU2eiIvPjwvc3ZnPg==); }.flit{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI1NiIgZmlsbD0iI2VlZSIvPjxwYXRoIGZpbGw9IiNkODAwMjciIGQ9Ik01MTIgMjU2QTI1NiAyNTYgMCAwIDAgMzQ1IDE2djQ4MGEyNTYgMjU2IDAgMCAwIDE2Ny0yNDB6Ii8+PHBhdGggZmlsbD0iIzZkYTU0NCIgZD0iTTAgMjU2YTI1NiAyNTYgMCAwIDAgMTY3IDI0MFYxNkEyNTYgMjU2IDAgMCAwIDAgMjU2eiIvPjwvc3ZnPg==); }.flro{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZkYTQ0IiBkPSJNMjU2IDBjLTMxLjMgMC02MS4zIDUuNi04OSAxNkw5IDI1NmwxNTggMjQwYTI1NS40IDI1NS40IDAgMCAwIDg5IDE2YzMxLjMgMCA2MS4zLTUuNiA4OS0xNmwxNTgtMjQwTDM0NSAxNmEyNTUuNSAyNTUuNSAwIDAgMC04OS0xNnoiLz48cGF0aCBmaWxsPSIjZDgwMDI3IiBkPSJNNTEyIDI1NkEyNTYgMjU2IDAgMCAwIDM0NSAxNnY0ODBhMjU2IDI1NiAwIDAgMCAxNjctMjQweiIvPjxwYXRoIGZpbGw9IiMwMDUyYjQiIGQ9Ik0xNjcgNDk2VjE2YTI1NiAyNTYgMCAwIDAgMCA0ODB6Ii8+PC9zdmc+); }.flru{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI1NiIgZmlsbD0iI2VlZSIvPjxwYXRoIGZpbGw9IiMwMDUyYjQiIGQ9Ik00OTYgMzQ1YTI1NS40IDI1NS40IDAgMCAwIDAtMTc4SDE2YTI1NS41IDI1NS41IDAgMCAwIDAgMTc4bDI0MCAyMi4zTDQ5NiAzNDV6Ii8+PHBhdGggZmlsbD0iI2Q4MDAyNyIgZD0iTTI1NiA1MTJhMjU2IDI1NiAwIDAgMCAyNDAtMTY3SDE2YTI1NiAyNTYgMCAwIDAgMjQwIDE2N3oiLz48L3N2Zz4=); }.flus{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI1NiIgZmlsbD0iI2VlZSIvPjxwYXRoIGZpbGw9IiNkODAwMjciIGQ9Ik0yNDQuOSAyNTZINTEyYzAtMjMuMS0zLTQ1LjUtOC44LTY2LjhIMjQ0LjlWMjU2em0wLTEzMy42aDIyOS41YTI1Ny40IDI1Ny40IDAgMCAwLTU5LTY2LjdIMjQ0Ljl2NjYuN3pNMjU2IDUxMmM2MC4yIDAgMTE1LjYtMjAuOCAxNTkuNC01NS43SDk2LjZBMjU0LjkgMjU0LjkgMCAwIDAgMjU2IDUxMnpNMzcuNiAzODkuNmg0MzYuOGEyNTQuNSAyNTQuNSAwIDAgMCAyOC44LTY2LjhIOC44YTI1NC41IDI1NC41IDAgMCAwIDI4LjggNjYuOHoiLz48cGF0aCBmaWxsPSIjMDA1MmI0IiBkPSJNMTE4LjYgNDBoMjMuM2wtMjEuNyAxNS43IDguMyAyNS42LTIxLjctMTUuOC0yMS43IDE1LjggNy4yLTIyYTI1Ny40IDI1Ny40IDAgMCAwLTQ5LjcgNTUuM2g3LjVsLTEzLjggMTBhMjU1LjYgMjU1LjYgMCAwIDAtNi4yIDExbDYuNiAyMC4yLTEyLjMtOWEyNTMuNiAyNTMuNiAwIDAgMC04LjQgMjBsNy4zIDIyLjNINTBMMjguNCAyMDVsOC4zIDI1LjVMMTUgMjE0LjZsLTEzIDkuNUEyNTguNSAyNTguNSAwIDAgMCAwIDI1NmgyNTZWMGMtNTAuNiAwLTk3LjcgMTQuNy0xMzcuNCA0MHptOS45IDE5MC40bC0yMS43LTE1LjgtMjEuNyAxNS44IDguMy0yNS41TDcxLjcgMTg5aDI2LjhsOC4zLTI1LjUgOC4zIDI1LjVoMjYuOGwtMjEuNyAxNiA4LjMgMjUuNXptLTguMy0xMDBsOC4zIDI1LjQtMjEuNy0xNS43LTIxLjcgMTUuNyA4LjMtMjUuNS0yMS43LTE1LjdoMjYuOGw4LjMtMjUuNiA4LjMgMjUuNmgyNi44bC0yMS43IDE1Ljd6bTEwMC4xIDEwMGwtMjEuNy0xNS44LTIxLjcgMTUuOCA4LjMtMjUuNS0yMS43LTE1LjhoMjYuOGw4LjMtMjUuNSA4LjMgMjUuNWgyNi44TDIxMiAyMDVsOC4zIDI1LjV6bS04LjMtMTAwbDguMyAyNS40LTIxLjctMTUuNy0yMS43IDE1LjcgOC4zLTI1LjUtMjEuNy0xNS43aDI2LjhsOC4zLTI1LjYgOC4zIDI1LjZoMjYuOEwyMTIgMTMwLjN6bTAtNzQuN2w4LjMgMjUuNi0yMS43LTE1LjhMMTc3IDgxLjNsOC4zLTI1LjZMMTYzLjUgNDBoMjYuOGw4LjMtMjUuNUwyMDcgNDBoMjYuOEwyMTIgNTUuN3oiLz48L3N2Zz4=); }
/*

generated by me with php $flagencoded= base64_encode($svgimageloadedfrompath);
then with echo,fwrite,content output in some other way I generate

echo '.classname1{ content:url(data:image/svg+xml;base64,'.$flagencoded.');}';
so I got what you reading up

in my case all svg files are from github: flags public domain(free to anyone to use)
*/
    p{
        width: 30px;
        height:30px;
    }
    </style>
   <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

 </head>
 <body>
  
  <div class="pb-3">
    <div class="container">
        <div class="row">
            <div class="col">
                <button class="btn btn bg-info" type="submit">
          <p class="fles"></p>
    </button>
            </div>
            
            <div class="col">
            <button class="btn btn bg-info" type="submit">
        <p class="flfr"></p>
    </button>
            </div>
            
            <div class="col">
            <button class="btn btn bg-info" type="submit">
    <p class="flus"></p>    
    </button>
            </div>
            
            <div class="col">
            <button class="btn btn bg-info" type="submit">
        <p class="flit"></p>
    </button>
            </div>
            
            <div class="col">
            <button class="btn btn bg-info" type="submit">
     <p class="flde"></p>   
    </button>
            </div>
            
            <div class="col">
            <button class="btn btn bg-info" type="submit">
    <p class="flcn"></p>    
    </button>
            </div>

            
            <div class="col">
            <button class="btn btn bg-info" type="submit">
     <p class="flro"></p>   
    </button>
            </div>

            
            <div class="col">
            <button class="btn btn bg-info" type="submit">
        <p class="flru"></p>
    </button>
            </div>

        </div>
    </div>
  </div>
  
    

 </body>
</html>
Admin1
Related