XF 1.4 How to add Facebook/twitter..etc link to already existed icons?

[KSA]

I have Facebook, twitter, in and gmail icons along with news letter subscription. They are located and the footer. The question is how to link those icons to make them functioning.

<xen:edithint template="footer.css" />
<div class="exchangelink">
    <div class="exdi">
        <div class="col_1">
            <h3>Terms and Rules</h3>
            <ul>
                <li><a href="http://world-defense.com/help/terms" target="_blank">Click here</a></li>
               
            </ul>
       
        </div>
        <div class="col_2">
            <h3>World Defense</h3>
            <p>is a discussion board for defense and military professionals and enthusiasts to discuss defense and military topics on global security, war on terror, army, land forces, air force, military aviation, navy, naval forces as well as nuclear and missile forces of the world.</p>
        </div>
        <div class="col_3">
            <h3>NEW LETTERS</h3>
            <form>
                <input type="text">
                <button>GO</button>
                <span>Submit your email to get News Letter</span>
            <form>
           
            <h3>CONNECT WITH US</h3>
            <a href="#" class="sf"><img src="@imagePath/xenforo/social/sf.png" alt="Facebook"></a>
            <a href="#" class="st"><img src="@imagePath/xenforo/social/st.png" alt="Twitter"></a>
            <a href="#" class="sl"><img src="@imagePath/xenforo/social/sl.png" alt="LinkedIn"></a>
            <a href="#" class="sg"><img src="@imagePath/xenforo/social/sg.png" alt="Google +"></a>
        </div>
    </div>
</div>
<xen:hook name="footer">
<div class="footer" style="clear:both;">
    <div class="pageWidth">
        <div class="pageContent">
            <ul class="footerLinks">
            <xen:hook name="footer_links">
                <xen:if is="{$xenOptions.contactUrl.type} === 'default'">
                    <li><a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a></li>
                <xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
                    <li><a href="{$xenOptions.contactUrl.custom}" {xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a></li>
                </xen:if>
                <li><a href="{xen:link help}">{xen:phrase help}</a></li>
                <xen:if is="{$homeLink}"><li><a href="{$homeLink}" class="homeLink">{xen:phrase home}</a></li></xen:if>
                <li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
                <li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
                    title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
            </xen:hook>
            </ul>
            <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
            <dl class="choosers">
                <xen:if is="{$canChangeStyle}">
                    <dt>{xen:phrase style}</dt>
                    <dd><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></dd>
                </xen:if>
                <xen:if is="{$canChangeLanguage}">
                    <dt>{xen:phrase language}</dt>
                    <dd><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a></dd>
                </xen:if>
            </dl>
            </xen:if>
            <div id="copyright"><span>{xen:phrase xenforo_copyright}</span> Designed by<a class="concealed" href="http://*******.com" target="_blank">******* LLC.</a></div>
            <xen:hook name="footer_after_copyright" />
           
           
            <span class="helper"></span>
        </div>
    </div>
</div>

<div class="footerLegal">
    <div class="pageWidth">
        <div class="pageContent">
            <ul id="legal">
            <xen:hook name="footer_links_legal">
                <xen:if is="{$tosUrl}"><li><a href="{$tosUrl}">{xen:phrase terms_and_rules}</a></li></xen:if>
                <xen:if is="{$xenOptions.privacyPolicyUrl}"><li><a href="{$xenOptions.privacyPolicyUrl}">{xen:phrase privacy_policy}</a></li></xen:if>
            </xen:hook>
            </ul>
           
           
       
            <xen:if is="{$debugMode}">
                <xen:if hascontent="true">
                    <dl class="pairsInline debugInfo" title="{$controllerName}-&gt;{$controllerAction}{xen:if $viewName, ' ({$viewName})'}">
                    <xen:contentcheck>
                        <xen:if is="{$page_time}"><dt>{xen:phrase timing}:</dt> <dd><a href="{$debug_url}">{xen:phrase x_seconds, 'time={xen:number $page_time, 4}'}</a></dd></xen:if>
                        <xen:if is="{$memory_usage}"><dt>{xen:phrase memory}:</dt> <dd>{xen:phrase x_mb, 'size={xen:number {xen:calc "{$memory_usage} / 1024 / 1024"}, 3}'}</dd></xen:if>
                        <xen:if is="{$db_queries}"><dt>{xen:phrase db_queries}:</dt> <dd>{xen:number {$db_queries}}</dd></xen:if>
                    </xen:contentcheck>
                    </dl>
                </xen:if>
            </xen:if>
           
            <span class="helper"></span>
        </div>
    </div>   
</div>
</xen:hook>

 

[Russ]

Replace the # at the:
<a href="#" with your link.

 

[KSA]

Replace the # at the:
<a href="#" with your link.

Thanks It worked.

What about where it says NEWS LETTER submit your email....etc. How to do i link that to my email address?