Bootstrap confirmation icon not showing

Question

I created a bootstrap confirmation for my link:

<a data-toggle="confirmation" data-title="Delete work order[![enter image description here][1]][1]?"
    href="##"><img src="./img/delete.png" height="15" ></a>

And the JS:

$('[data-toggle=confirmation]').confirmation({
});

Everything is working fine, but the delete and cancel icons are not showing (image below). Why is it now showing? Is there a way to remove this icon and just display the buttons with its label?

Thanks

Answer 1

First ensure that you have all the 3 files below were included in your page. especially the css file which contains the font.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

The Image did not show because you have referenced the full links of the actual directory where it resides.

Something like this can give you a clue

http://localhost/project/img/delete.png

or you can also try adding two dots (..) to get retrieve deeper.

../img/delete.png

Mean while bootstraps has many beautiful gliphyicons that you can integrate without using images

You can try this directory with bootstrap glyphicons

<a data-toggle="confirmation" data-title="Delete work order[![enter image description here][1]][1]?"
    href="##">Delete <span class="glyphicon glyphicon-remove"></span></a>

More refrences on Boostraph Gliphyicons can be found here https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp