在导航下添加社交媒体图标

Question

我正在尝试将导航下方的社交媒体图标添加到右侧，但我不知道应该在哪里放置图像链接以实现此目的。任何帮助将不胜感激！我在下面添加了我的网站css和html。网站：http://customjtw.virb.com/

CSS：

    /*
---------------------------------------
APOLLO
---------------------------------------
by Ryan Clark
www.ryanvsclark.com
---------------------------------------                                                                                                          
*/


/* ---------- GLOBAL STYLING RULES & RESETS ---------- */
* {
    margin: 0px;
    padding: 0px;
}

<virb get="customize.fonts.font_face" />

body {
    background: <virb get="customize.colors.background_footer" />;
    font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />;
    color:<virb get="customize.colors.text" />;
    line-height: 1.5;
    font-family: <virb get="customize.fonts.body_family" />,serif; 
}

hr { display: none; }

#page hr {
    display: block;
    border: none 0; 
    border-top: 1px solid <virb get="customize.colors.line_page" />;
    width: 100%;
    height: 1px;
    margin: 0 0 20px 0;
}

input, option, textarea, 
button {
    font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />;
}

ul, ol {
    list-style-type: none;
}

q:before, q:after { content: ""; }

big   { font-size: 12px; }
small { font-size: 9px; }

img   { border: none; }

a {
    color: <virb get="customize.colors.link" />;
    text-decoration: none;
    outline: none;
}

a:hover {
    color: <virb get="customize.colors.link_hover" />;
}

#footer a {
    color: <virb get="customize.colors.footer_link" />;
    text-decoration: none;
    outline: none;
}

#footer a:hover {
    color: <virb get="customize.colors.footer_link_hover" />;
}

p, h1, h2, h3, h4, h5, h6,
ol, ul {
    line-height: 1.5;
}
#container_right p {
    line-height: 150%;
}
#page #description h2, #page #blog .text h3 {
    font-size: 1.5em;
    font-family: <virb get="customize.fonts.body_family" />;
}

.homepage #page #description h2 {
    margin: 10px 0 0 0;
    font-size: 1.5em;
}

.homepage #page #description h3 {
    font-size: 1.2em;
    font-family: <virb get="customize.fonts.body_family" />;
    color:#888;
}

#header_wrapper, #page_wrapper, #footer_wrapper  {
    width:100%;
    position:relative;
}



/* ---------- HEADER ---------- */

div#header_wrapper {
    width:100%;
    background: <virb get="customize.colors.background_header" />;
    z-index: 2;
}

div#header {
    width:960px;
    margin:0 auto;
    padding:35px 0 20px;
}
    #header h1 {
        font: normal <virb get="customize.fonts.site_size" /><virb get="customize.fonts.site_family" />;
        line-height: 100%;
    }

        #header h1 a,
        #header h1 a:hover {
            color: <virb get="customize.colors.site_name" />;
        }

        #header h1 img {
            display: block;
            max-width: 300px;
        }

    #header h2 {
        font-weight: bold;
        font-size: <virb get="customize.fonts.tagline_size" />;
        font-family: <virb get="customize.fonts.header_family" />;
        color: <virb get="customize.colors.tagline" />;
        line-height: 110%;
        padding-top: 6px;
    }

    #header #page_title {
       float:left;
    }
    #header #site_nav {
       float:right;
       margin-top: 54px;
    }

#display_name {width: 300px;}

    #display_name h2 {color:<virb get="customize.colors.tagline" />; text-transform: uppercase;}


/* ---------- NAVIGATION ---------- */

div#site_nav {
    display: block;
    max-width: 700px;
}

#site_nav ul li {
    display: inline;
    position: relative;
    font-size: <virb get="customize.fonts.nav_size" />;
    font-family: <virb get="customize.fonts.header_family" />;
    font-weight: bold;
    letter-spacing: .2px;
    text-transform: uppercase;
}

#site_nav div.clear {
    display: none;
}

    #site_nav li.section:after { content: " "; }

    #site_nav li.section ul { display: none; } 
    #site_nav li.section:hover ul { display: block; }
    #site_nav li.section ul {
        position: absolute;
        top: <virb get="customize.fonts.nav_size" />;
        left: 10px;
        width: 200px;
        z-index: 111;
        padding-top: 10px;
    }
        #site_nav li.section ul li {
            float: none;
            display: block;
            font: normal <virb get="customize.fonts.nav_size" />;
            background: <virb get="customize.colors.nav_dropdown" />;
            margin: 0;
            padding: 7px 7px 5px 7px;
            letter-spacing: 0;
            text-align: left;
            line-height: 1.5;
            border-bottom: 1px solid <virb get="customize.colors.background_header" />;
        }
            #site_nav li.section ul li:last-child {border-bottom: none;}

            #site_nav li.section ul li a {
                text-transform: none;
                letter-spacing: 0;
                padding: 4px 7px 4px 3px;
                font: <virb get="customize.fonts.header_family" />;
                display: block;
            }

    #site_nav ul li a, 
    #site_nav ul li.section {
        cursor: pointer;
        padding: 0 12px;
        font: <virb get="customize.fonts.header_family" />;
        color: <virb get="customize.colors.nav_link" />;
    }
    #site_nav ul li a:hover,
    #site_nav ul li.section:hover {
        color: <virb get="customize.colors.nav_hover" />;
    }
    #site_nav ul li.active, #site_nav ul li.active a {
        color: <virb get="customize.colors.nav_hover" />;
    }

    #site_nav ul li.active ul li a {
        color: <virb get="customize.colors.nav_link" />;
    }

    #site_nav ul li.active ul li a:hover {
        color: <virb get="customize.colors.nav_hover" />;
    }

    #site_nav ul li.active ul li.active a {
        color: <virb get="customize.colors.nav_hover" />;
        cursor: default;
    }


/* ---------- PAGE ---------- */

div#page_wrapper {
    background: <virb get="customize.colors.background_page" />;
    z-index: 1;
    overflow: hidden;
}

div#page {
    width:960px;
    margin:0 auto;
    padding:25px 0 15px;
    overflow: hidden;
    border-top: 1px solid <virb get="customize.colors.line_page" />;
    border-bottom: 1px solid <virb get="customize.colors.line_page" />;
}

body.index div#page {padding-bottom: 0;}

#page div#description {
    position: relative;
    padding: 0;
    width:600px;
}
    #page #description p, #page #description h2, #page #description h3, #page #description h4, #page #description h5, #page #description h6 {
        padding: 0 0 15px 0;
    }

    #page #description ul li, #page #description ol li {padding: 0 0 5px 0;}

    #page #description h2 {line-height: 1.3;}

div#share {
    display: block;
    position: relative;
    clear: both;
    padding: 10px 0 0 0;
}

#page #title {
    display: yes;
    font-size: 22px;
    color:#527fb1;
    padding: 0 0 12.5px 0;
}


/* ---------- SIDEBAR ---------- */

div#widgets {
    font-size: 11px;
    overflow: hidden;
    line-height: 0;
    font-family: <virb get="customize.fonts.footer_family" />;
}

div#widgets:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "\00A0";
}

    #widgets .module {
        display: block;
        float: left;
        width: 300px;
        padding: 0 0 20px 0;
        margin: 0 30px 0 0;
    }
    #widgets .last_module {margin: 0;} 

        #widgets .module h4 {
            font: italic <virb get="customize.fonts.body_size"/> <virb get="customize.fonts.footer_family" />;
            color: <virb get="customize.colors.widget_text" />;
            letter-spacing: .2px;
            padding: 0 0 10px 0;
            margin-bottom:10px;
            border-bottom: 1px solid <virb get="customize.colors.line_footer" />;
        }
            #widgets h4 a { color: <virb get="customize.colors.footer_link" />; }
            #widgets h4 a:hover { color: <virb get="customize.colors.footer_link_hover" />; }

        #widgets .module p {
            font-size: <virb get="customize.fonts.body_size" />;
            line-height: 150%;
            padding: 0;
        }

            #widgets .module.twitter ul li span a,
            #widgets .module.lastfm ul.recent_plays li span {
                color: <virb get="customize.colors.footer_link" />;
            }
            #widgets .module.twitter ul li span a:hover {
                color: <virb get="customize.colors.text" />;
            }

        #widgets .module.lastfm ol {
            list-style-type: decimal;
            list-style-position: inside;
        }

            #widgets .module.rss-feed ul,
            #widgets .module.blog-posts ul, 
            #widgets .module.twitter ul, 
            #widgets .module.lastfm ul.upcoming_events,
            #widgets .module.lastfm ul.recent_plays {
                margin-bottom: -10px;
            }

            #widgets .module.rss-feed ul li,
            #widgets .module.blog-posts ul li,
            #widgets .module.twitter ul li,
            #widgets .module.lastfm ul.upcoming_events li,
            #widgets .module.lastfm ul.recent_plays li {
                padding-bottom: 10px;
            }

                #widgets .module.lastfm ol li img { display: none; }

        #widgets .count_2, #widgets .count_5, #widgets .count_8, #widgets .count_11, #widgets .count_14, #widgets .count_17 {
            margin: 0;
        }


    /* AUDIO PLAYER */

    .module.audio_player ul {
        display: block;
        width: 278px;
        background: #fff;
        border: solid 1px #ddd;
        border-radius: 5px;
        padding: 10px 10px 15px 10px;
        overflow: hidden;
    }
    .module.audio_player li .album_image {
        height: 75px;
        width: 75px;
        padding: 5px 15px 5px 5px;
        margin-bottom: 10px;
        display: block;
        float:left;
    }
    .module.audio_player li .album_image img {
       height:75px;
       width:75px;
    }

    .module.audio_player li {
        display: none;
    }
    .module.audio_player li.selected {
        display: block;
    }
    #widgets .module.audio_player li h3 {
        text-align: left;
        font-size: <virb get="customize.fonts.body_size" />;
        padding-bottom: 2px;
    }
        #widgets .module.audio_player li h3 .download {
            display: none;
        }
    #widgets .module.audio_player ul h4 {
        display: block;
        text-align: left;
        font: normal 12px <virb get="customize.fonts.footer_family" />;
        text-transform: none;
        border: none;
        letter-spacing: 0;
        padding: 0 0 2px 0;
        margin: 0;
        color: <virb get="customize.colors.text" />;
    }
    .module.audio_player .controls {
        display: block;
        float: left;
        margin:5px 0 10px 0;
        text-align: left;
        padding-bottom: 10px;
        width: 180px;
        border-bottom: 1px solid <virb get="customize.colors.line_page" />;
    }
        .module.audio_player .controls .prev,
        .module.audio_player .controls .next {
            display: inline-block;
            width: 20px;
            height: 30px;
        }
        .module.audio_player .controls .prev a,
        .module.audio_player .controls .next a {
            display: inline-block;
            width: 20px;
            height: 30px;
            overflow: hidden;
            text-indent: 1000px;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border-radius: 7px;
        }
        .module.audio_player .controls .prev a {
            background: url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat left -7px;   
        }
        .module.audio_player .controls .next a {
            background: url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat right -7px;
        }

        .module.audio_player .controls .playpause {
            display: inline-block;
            height: 30px;
            width: 35px;
            overflow: hidden;
        }
            .module.audio_player .controls .playpause a {
                display: block;
                height: 30px;
                width: 35px;
                overflow: hidden;
                text-indent: 1000px;
                background: <virb get="customize.colors.text" /> url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat center -7px;
                -moz-border-radius: 7px;
                -webkit-border-radius: 7px;
                border-radius: 7px;
            }
            .module.audio_player .playing .controls .playpause a {
                background: <virb get="customize.colors.link" /> url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat center -52px;
            }

    .module.audio_player audio {
        width: 150px;
        padding: 15px 5px 0px 5px;
    }

    .module.audio_player .length {
        display: block;
        height: 6px;
        width: 150px;
        border: solid 1px #ddd;
        background: #ddd;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px; 
        position: relative; 
        margin-top: 9px;
        float:left;
        margin-left:95px;
    }
        .module.audio_player .length .load {
            height: 6px;
            width: 0%;
            display: block;
            background: <virb get="customize.colors.text" />;
            position: absolute;
        }
        .module.audio_player .length .progress {
            height: 6px;
            width: 0%;
            display: block;
            background: <virb get="customize.colors.link" />;
            position: absolute;
        }
        .module.audio_player .length .time {
            color: <virb get="customize.colors.text" />;
            font-size: <virb get="customize.fonts.body_size" />;
            position: absolute;
            left: 157px;
            top: -4px;
        }



/***** @group Cart widget *****/

.cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 2000;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.line_page" />;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px;
  }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .65em;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.link_hover" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.background_page" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
  }
    .cart-widget .checkout:hover {
      background: <virb get="customize.colors.link" />;
    }

/***** @group Cart widget *****/



/* ---------- FOOTER ---------- */

div#footer {
    width:960px;
    margin:0 auto;
    padding:25px 0;
    font-family: <virb get="customize.fonts.footer_family" />;
    color: <virb get="customize.colors.widget_text" />;
}       

span#virb_customize_footer {
    color: <virb get="customize.colors.footer_text" />;
    padding-top: 10px;
    width:100%;
    display: block;
}


/* ie7 specific styles */

.ie7 .audio_player .controls .playpause a, 
.ie7 .audio_player .controls .prev a, 
.ie7 .audio_player .controls .next a {
  font-size:0;
  display: block;
  line-height: 0;
}

/* ---------- SOCIAL LINKS WIDGET ---------- */
div.social-links ul {
    margin:0;
    padding:0;
    list-style: none;
    overflow: hidden;
    }

    div.social-links ul li a {
        float:left;
        display:block;
        text-indent: -9999px;
        }       

    div.social-links ul.large a {
        width:64px;
        height:64px;
        margin:0 5px 5px 0;
        }

        div.social-links ul.large.simplebutton li a,
        div.social-links ul.large.shinycircle li a,
        div.social-links ul.large.shinybutton li a {
            width:64px;
            height:66px;
            margin:0 5px 5px 0;
        }

    div.social-links ul.small li a {
        width:32px;
        height:32px;
        margin:0 5px 5px 0;
        }

        div.social-links ul.small.simplebutton li a,
        div.social-links ul.small.shinycircle li a,
        div.social-links ul.small.shinybutton li a {
            width:32px;
            height:33px;
            margin:0 5px 5px 0;
        }

HTML：

    <!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie ie9"> <![endif]-->
<html>
  <head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>  
.accordion {margin:0px;border-bottom: 1px solid #e5e5e5;width: 300px}.accordion dt{padding-top:0px;padding-bottom:10px;font: 14px arial}.accordion dd {padding-top: 0px;padding-bottom: 10px;font-size: 12px}.accordion a {display: block;color: black;font-weight: bold;text-decoration: none}body{font: 12px arial}​ 
</style>

<script type='text/javascript'>//<![CDATA[ 
  $(function(){
      (function($) {

         var allPanels = $('.accordion > dd').show();

         $('.accordion > dt > a').click(function() {
              $(this).parent().next('dd').slideUp();

         if($(this).parent().next().is(':hidden'))
         {
              $(this).parent().next().slideDown();
         }

         return false;
        });

     })(jQuery);
   });//]]>  

</script>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>  
.accordionbr {margin:0px;border-bottom: 1px solid #e5e5e5;width: 300px}.accordionbr dt{padding-top:0px;padding-bottom:10px;font: 14px arial}.accordionbr dd {padding-top: 0px;padding-bottom: 10px;font-size: 12px}.accordionbr a {display: block;color: black;font-weight: bold;text-decoration: none}body{font: 12px arial}​ 
</style>

<script type='text/javascript'>//<![CDATA[ 
  $(function(){
      (function($) {

         var allPanels = $('.accordionbr > dd').hide();

         $('.accordionbr > dt > a').click(function() {
              $(this).parent().next('dd').slideUp();

         if($(this).parent().next().is(':hidden'))
         {
              $(this).parent().next().slideDown();
         }

         return false;
        });

     })(jQuery);
   });//]]>  

</script>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>  
.accordion2 {margin:0px;border-bottom: 1px solid #e5e5e5;width: 640px}.accordion2 dt{padding-top:0px;padding-bottom:10px;font: 14px arial}.accordion2 dd {padding-top: 0px;padding-bottom: 10px;font-size: 12px}.accordion2 a {display: block;color: black;font-weight: bold;text-decoration: none}body{font: 12px arial}​ 
</style>

<script type='text/javascript'>//<![CDATA[ 
  $(function(){
      (function($) {

         var allPanels = $('.accordion2 > dd').show();

         $('.accordion2 > dt > a').click(function() {
              $(this).parent().next('dd').slideUp();

         if($(this).parent().next().is(':hidden'))
         {
              $(this).parent().next().slideDown();
         }

         return false;
        });

     })(jQuery);
   });//]]>  

</script>

    <!-- APOLLO -->
    <virb load="title" />
    <virb load="meta" />
    <virb load="css" />
    <virb load="icon" />

    <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->
  </head>

  <body class="get[page.type] get[page.format] get[page.class]">   

    <!-- HEADER WRAPPER -->
    <div id="header_wrapper">

      <!-- HEADER -->
      <div id="header">

        <div id="site_nav">
          <virb load="nav" />
        </div>

        <div class="module" id="display_name">
          <h1><a href="get[site.url]"><virb customize="logo" /></a></h1>
          <h2 id="virb_customize_tagline"><virb customize="tagline" /></h2>
        </div> 

      </div>
      <!-- END HEADER -->

    </div>
    <!-- END HEADER WRAPPER -->


    <!-- PAGE WRAPPER -->
    <div id="page_wrapper">

      <!-- PAGE -->
      <div id="page">
        <virb load="template" />
      </div>
      <!-- END PAGE -->

    </div>  
    <!-- END PAGE WRAPPER -->  


    <!-- FOOTER WRAPPER -->
    <div id="footer_wrapper">

    <!-- FOOTER -->
      <div id="footer">

        <!-- WIDGETS/SITE --> 
        <div id="widgets"> 
            <virb load="widgets" />
        </div> 
        <!-- END SIDEBAR --> 

        <p><virb customize="footer" /></p>

      </div>
      <!-- END FOOTER -->

    </div>
    <!-- END FOOTER WRAPPER -->

  </body>
</html>

Answer 1

这有点难以分辨，因为这不是纯HTML（那些virb标签是标记实际html注入位置的模板标签），但我怀疑放置它们的最佳位置是{{{在#site_nav标记之后的1}} div - 这样它们将位于添加的导航列表下方，但它们仍然会向右浮动。像这样：

<virb load="nav" />

然后继续添加所需的任何CSS类或样式，以便根据需要定位图像。