Q:

Add png Icon To HTML

I wonder whether someone may be able to help me please. 
Firstly apologies, because for some this may be a really basic question, but I new to this so please bear with me. 
I'm using the script below to create an image gallery in fancyBox. 
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  <title>Gallery</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <script type="text/javascript" src="fancybox/lib/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
    <link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
    <link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
    <link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />

  <script type="text/javascript">  

            $('.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 : '');
                }
            });

</script> 
  <style type="text/css">
<!-- 
.style1 {
    font-size: 14px;
    margin-top: 5px;
    margin-right: 110px;
}
-->
  </style>  
</head>
<body style="font-family: Calibri; color:  #505050; margin-left: 240px; float:left;"/>
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> &larr; View Uploaded Images </div> 
  <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;"> 

    <p>
      <? php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :  
                          $xmlFile = $descriptions->documentElement->childNodes->item($i);  
                          $name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');  
                          $description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');  
                          $source = $galleryPath .  rawurlencode($xmlFile->getAttribute('source'));  
                          $thumbnail = $thumbnailsPath .  rawurlencode($xmlFile->getAttribute('thumbnail'));  
                  ? >
      <a class="fancybox" rel="allimages" title="<?php echo $name; ? >" href="<?php echo $source; ? >"><img src="<?php echo $thumbnail; ? >"alt="<?php echo $description; ? >" /></a>
      <? php endfor; ? >  
    </p>
</form>  
</body>
</html> 

I'm now wanting to add functionality that allows the user to delete an image. 
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. 
I've tried to find a tutoriual online that shows me how to do this, but have so far been unsuccessful.  
I just wondered whether someone could possibly provide som guidance how i add this to my page. 
Many thanks and regards

A:

Just before this line:
<a class="fancybox" rel="allimages" title="<?php echo $name; ? >" href="<?php echo $source; ? >"><img src="<?php echo $thumbnail; ? >"alt="<?php echo $description; ? >" /></a>

You could add something like this:
<img src="path/to/image.png" class="removeImage" alt="Remove this image" />

And then do something like this with jQuery:
$('.removeImage').click(function(){
    $(this).next('a.fancybox').remove();
});

There are lots of other changes I would make to the document too.  For example, it'd be a good idea to remove all inline styles, and group them together into an external stylesheet.  The same goes for your javascript.  Furthermore:

You tried self-closing your opening body tag like this: <body /> — we don't do that. 
When using font-family, it's always a good idea to make a web-safe list of fonts.  Check this out for more: http://cssfontstack.com/
The align attribute in HTML is deprecated

I've made a few changes to your document so it's easier to work with.  Here's the HTML/PHP:
<! doctype html>
<! --[if lt IE 7 ]> <html class="ie6"> <![ endif]-->
<! --[if IE 7 ]>    <html class="ie7"> <![ endif]-->
<! --[if IE 8 ]>    <html class="ie8"> <![ endif]-->
<! --[if IE 9 ]>    <html class="ie9"> <![ endif]-->
<! --[if (gt IE 9)|!(IE)]><!--> <html class=""> <! --<![endif]-->
<head>  

<title>Gallery</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  

<!--  styles -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />  
</head>

<body>
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> &larr; View Uploaded Images </div> 
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
<p>
<? php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :  
                      $xmlFile = $descriptions->documentElement->childNodes->item($i);  
                      $name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');  
                      $description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');  
                      $source = $galleryPath .  rawurlencode($xmlFile->getAttribute('source'));  
                      $thumbnail = $thumbnailsPath .  rawurlencode($xmlFile->getAttribute('thumbnail'));  
              ? >
  <a class="fancybox" rel="allimages" title="<?php echo $name; ? >" href="<?php echo $source; ? >"><img src="<?php echo $thumbnail; ? >"alt="<?php echo $description; ? >" /></a>
  <? php endfor; ? >  
</p>
</form>

<!--  scripts -->
<script type="text/javascript" src="fancybox/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

... Here's your stylesheet — screen.css:
body {font-family: Calibri; color: #505050; margin-left: 240px; float:left;}
.style1 {font-size: 14px; margin-top: 5px; margin-right: 110px;}
#gallery {margin-left: -120px; margin-right: 50px; border-left: 100; caption-side: left;}

And finally your scripts that run once the page is ready — main.js:
$(function(){
    $('.removeImage').click(function(){
        $(this).next('a.fancybox').remove();
    });

$('.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 : '');
            }
        });
})

