How to add svg icon to a button with a text

Question

I have a source of the svg icon svgIcon. I need to add this icon to the button. It would look very similar to this

I tried this:

css

  .btn {
     border: none;
     color: grey;
     padding: 12px 16px;
     font-size: 16px;
     cursor: pointer;
     background-image: url("http://alexfeds.com/wp- 
     content/uploads/2018/04/save_icon.svg");
     background-repeat: repeat-y;
       }

   <button class="btn"> Save</button>

But result is this:

How to have the svg icon inside the button and text description beside it?

Solution 1

I usually use the pseudo element. Please check the result below:

.btn {
     border: none;
     color: grey;
     padding: 12px 16px;
     font-size: 16px;
     cursor: pointer;
 }
 
 .btn:before {
   content: url(http://alexfeds.com/wp-content/uploads/2018/04/save_icon.svg);
   width: 20px;
   float: left;
   margin-right: 5px;
   margin-top: -2px;
 }

<button class="btn">Save</button>

Solution 2

Try to increase padding-left and set background-size of the icon. There is no need of background-repeat to repeat-y, use no-repeat instead.

.btn {
     border: none;
     color: grey;
     padding: 12px 16px 12px 36px; // Changed padding-left value, set as per your requirement
     font-size: 16px;
     cursor: pointer;
     background-image: url("http://alexfeds.com/wp- 
     content/uploads/2018/04/save_icon.svg");
     background-size: 25px auto; //Set as per your requirement
     background-repeat: no-repeat; // Changed
 } 

Solution 3

.custom-btn .ico-btn {
    color: grey;
    padding: 12px 16px 12px 40px;
    background:url(http://alexfeds.com/wp-content/uploads/2018/04/save_icon.svg) no-repeat 13px 9px;
    background-size: 25px auto;
    background-color:#eaeaea;
 }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="custom-btn">
  <button class="btn ico-btn">Button </button>
<div>

Solution 4

Couple of alternatives

.btn {
 border: none;
 color: grey;
 font-size: 16px;
 cursor: pointer;
 padding: 12px 16px;
 }

 .btn:before {
 content: "";
 display: block;
 background:url("http://alexfeds.com/wpcontent/
 uploads/2018/04/save_icon.svg") no-repeat;
 width: 16px;
 height: 16px;
 float: left;
 margin: 0 6px 0 0;
 }
 .btn2 {
 border: none;
 color: grey;
 padding: 12px 16px 12px 50px;
 font-size: 16px;
 cursor: pointer;
 background-image: url("http://alexfeds.com/wp- 
 content/uploads/2018/04/save_icon.svg");
 background-repeat: repeat-y;
 }

 a {
 text-decoration: none;
 color: #515151;
 display: inline-block;
 background-color: #dfdfdf;
 padding: 12px 16px;
 }
 a:before {
 font-family: FontAwesome;
 content: "\f15b";
 display: inline-block;
 padding-right: 10px;
 vertical-align: middle;
 font-size: 20px;
 }

Demo - jsfiddle

View more solutions

Comments

[patelarpan]

why we need bootstrap?

[Gautam Naik]

@patelarpan , question had twitter-bootstrap3 tag

[AlexFF1]

nice example, thank you for this, going to learn this one. Thanks

[AlexFF1]

actually would need a bootstrap, so this button can be responsive within a grid