Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Feb 2018
    Posts
    4
    Member #
    58467

    Putting icons side by side

    I want to put these two icons side by side (Facebook and Twitter) https://panam103-test.syr.edu/

    How would I do that, current code i have is this and right now they are on top of each other...

    Code:
    <div class="widget-text">
    <a href="https://www.facebook.com/Pans/">
    <img alt="FacebookPanAm" height="40" src="/images/img-icon-facebook.png" width="40"/>
                                                </a>
    
    <a href="https://twitter.com/intent">
    <img alt="TwitterPanAm" height="40" src="/images/img-icon-twitter.png" width="40"/>
                                                </a>
                                            </div>
    Attached Images Attached Images

  2.  

  3. #2
    Junior Member
    Join Date
    Feb 2018
    Posts
    11
    Member #
    58446
    In the live version of your site, you have a "<br>" in between the two icons. the <br> isn't here though. Remove that.

    Then use this added CSS:

    <div class="widget-text">
    <a href="https://www.facebook.com/Pans/">
    <img alt="FacebookPanAm" height="40" src="/images/img-icon-facebook.png" width="40" style="float:left"/>
    </a>

    <a href="https://twitter.com/intent">
    <img alt="TwitterPanAm" height="40" src="/images/img-icon-twitter.png" width="40"/>
    </a>
    </div>


    If that puts the images too close for comfort, you can use the padding style attribute.

  4. #3
    Junior Member
    Join Date
    Feb 2018
    Posts
    4
    Member #
    58467
    Quote Originally Posted by zipzapzoo View Post
    In the live version of your site, you have a "<br>" in between the two icons. the <br> isn't here though. Remove that.

    Then use this added CSS:

    <div class="widget-text">
    <a href="https://www.facebook.com/Pans/">
    <img alt="FacebookPanAm" height="40" src="/images/img-icon-facebook.png" width="40" style="float:left"/>
    </a>

    <a href="https://twitter.com/intent">
    <img alt="TwitterPanAm" height="40" src="/images/img-icon-twitter.png" width="40"/>
    </a>
    </div>


    If that puts the images too close for comfort, you can use the padding style attribute.
    Thank you, I have to do my css in a seperate file, so what would be in the css file and how will it look like in the html...

    I am already calling a css file...

    so I have this so far

    in my css i Have this

    #icon {

    style: float: left !important;
    }


    but not sure how to write it in the html

  5. #4
    Senior Member
    Join Date
    Feb 2006
    Posts
    791
    Member #
    12463
    Liked
    296 times
    #icon is an id - you have to add the id to your img code

  6. #5
    Junior Member
    Join Date
    Feb 2018
    Posts
    11
    Member #
    58446
    Did that work once you added #icon to the image, OP?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:51 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com