اريد التعديل على كود الفيسبوك وتويتر هذا



اريد تحويله من الشكل العامودي الى الافقي
وشكرا
الكود

الكود:



    </li></ul><div
     id="follow_fdf"><a target="_blank" href="https://www.facebook.com/mustafa3max?fref=ts"><img alt="Facebook"
    src="http://2img.net/i/fa/optimisation_fdf/fr/facebook10.png"/></a><a
     target="_blank" href="https://twitter.com/ABOFATMAALSLMAN"><img alt="Twitter"
    src="http://2img.net/i/fa/optimisation_fdf/fr/twitter10.png"/></a></div>


    <style>

    #follow_fdf {
      float: right;
      
      padding-left: 1098px;
    }

    #follow_fdf img {
      vertical-align: middle;
      max-height: 50px;
      transition-duration: 400ms;
      -moz-transition-duration: 400ms;
      -o-transition-duration: 400ms;
      -webkit-transition-duration: 400ms;
    }

    #follow_fdf img:hover {
        transform:rotate(-10deg);
        -ms-transform:rotate(-10deg);
        -moz-transform:rotate(-10deg);
        -webkit-transform:rotate(-10deg);
        -o-transform:rotate(-10deg);
    }
    </style>


تم الحل لجعل الايقونات افقية كل ماعليك حذف هذا النص المظلل بالصورة اوتجعل القيمة 0






وتفضلو الكود بعد التعديل

الكود:




    </li></ul><div
     id="follow_fdf"><a target="_blank" href="https://www.facebook.com/mustafa3max?fref=ts"><img alt="Facebook"
    src="http://2img.net/i/fa/optimisation_fdf/fr/facebook10.png"/></a><a
     target="_blank" href="https://twitter.com/ABOFATMAALSLMAN"><img alt="Twitter"
    src="http://2img.net/i/fa/optimisation_fdf/fr/twitter10.png"/></a></div>


    <style>

    #follow_fdf {
      float: right;
      background: url('http://i40.servimg.com/u/f40/11/60/75/36/follow14.png') no-repeat scroll 0 5px transparent;
      
    }

    #follow_fdf img {
      vertical-align: middle;
      max-height: 50px;
      transition-duration: 400ms;
      -moz-transition-duration: 400ms;
      -o-transition-duration: 400ms;
      -webkit-transition-duration: 400ms;
    }

    #follow_fdf img:hover {
        transform:rotate(-10deg);
        -ms-transform:rotate(-10deg);
        -moz-transform:rotate(-10deg);
        -webkit-transform:rotate(-10deg);
        -o-transform:rotate(-10deg);
    }
    </style>


وهذا نفس الكود باضافة ايقونة اليوتيوب

الكود:


        </li></ul><div
     id="follow_fdf"><a target="_blank" href="رابط الفيسبوك"><img alt="Facebook"
    src="http://2img.net/i/fa/optimisation_fdf/fr/facebook10.png"/></a><a
     target="_blank" href="رابط تويتر"><img alt="Twitter"
    src="http://2img.net/i/fa/optimisation_fdf/fr/twitter10.png"/></a><a
     target="_blank" href="رابط اليوتيوب"><img alt="youtube"
     src="http://i58.servimg.com/u/f58/18/51/43/47/youtub10.png"/></a><a
<div/>

        <style>

        #follow_fdf {
          float: right;
          
        
       }

        #follow_fdf img {
          vertical-align: middle;
          max-height: 50px;
          transition-duration: 400ms;
          -moz-transition-duration: 400ms;
          -o-transition-duration: 400ms;
          -webkit-transition-duration: 400ms;
        }

        #follow_fdf img:hover {
            transform:rotate(-10deg);
            -ms-transform:rotate(-10deg);
            -moz-transform:rotate(-10deg);
            -webkit-transform:rotate(-10deg);
            -o-transform:rotate(-10deg);
        }
        </style>