title: Add png Icon To HTML
body: <p>I wonder whether someone may be able to help me please.</p>
  
  <p>Firstly apologies, because for some this may be a really basic question, but I new to this so please bear with me.</p>
  
  <p>I'm using the script below to create an image gallery in fancyBox.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;  
  &lt;head&gt;  
    &lt;title&gt;Gallery&lt;/title&gt;  
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;  
      &lt;script type="text/javascript" src="fancybox/lib/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" /&gt;
  
  
    &lt;script type="text/javascript"&gt;  
  
              $('.fancybox').fancybox({
                  openEffect  :   'elastic',
                  closeEffect :   'elastic',
  
                  padding :   20,
                  fitToView   :   true,
  
                  prevEffect :    'none',
                  nextEffect :    'none',
  
                  closeBtn  : false,
                  arrows : false,
  
                  helpers : {
                      title : {
                          type : 'inside'
                      },
                      buttons : {}
                  },
  
                  afterLoad : function() {
                      this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                  }
              });
  
  
  &lt;/script&gt; 
    &lt;style type="text/css"&gt;
  &lt;!--
  .style1 {
      font-size: 14px;
      margin-top: 5px;
      margin-right: 110px;
  }
  --&gt;
    &lt;/style&gt;  
  &lt;/head&gt;
  &lt;body style="font-family: Calibri; color:  #505050; margin-left: 240px; float:left;"/&gt;
  &lt;div align="right" class="style1"&gt; &lt;a href = "javascript:document.gallery.submit()"/&gt; Add Images &lt;a/&gt; &amp;larr; View Uploaded Images &lt;/div&gt; 
    &lt;form id="gallery" name="gallery" class="page" action="index.php" method="post" style="margin-left: -120px; margin-right: 50px; border-left: 100; caption-side: left;"&gt; 
  
      &lt;p&gt;
        &lt;?php for ($i = 0; $i &lt; $descriptions-&gt;documentElement-&gt;childNodes-&gt;length; $i++) :  
                            $xmlFile = $descriptions-&gt;documentElement-&gt;childNodes-&gt;item($i);  
                            $name = htmlentities($xmlFile-&gt;getAttribute('originalname'), ENT_COMPAT, 'UTF-8');  
                            $description = htmlentities($xmlFile-&gt;getAttribute('description'), ENT_COMPAT, 'UTF-8');  
                            $source = $galleryPath . rawurlencode($xmlFile-&gt;getAttribute('source'));  
                            $thumbnail = $thumbnailsPath . rawurlencode($xmlFile-&gt;getAttribute('thumbnail'));  
                    ?&gt;
        &lt;a class="fancybox" rel="allimages" title="&lt;?php echo $name; ?&gt;" href="&lt;?php echo $source; ?&gt;"&gt;&lt;img src="&lt;?php echo $thumbnail; ?&gt;"alt="&lt;?php echo $description; ?&gt;" /&gt;&lt;/a&gt;
        &lt;?php endfor; ?&gt;  
      &lt;/p&gt;
  &lt;/form&gt;  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>I'm now wanting to add functionality that allows the user to delete an image.</p>
  
  <p>Using the 'Silk icons' from 'famfamfam.com' I've found a suitable icon that I want to place to the left upper side of each image but I'm not sure how to add the icon to my page.</p>
  
  <p>I've tried to find a tutoriual online that shows me how to do this, but have so far been unsuccessful. </p>
  
  <p>I just wondered whether someone could possibly provide som guidance how i add this to my page.</p>
  
  <p>Many thanks and regards</p>