Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Align social icons in same line as text CSS – Facebook api

I want to have a short text to the left, and to the right, some social icons.

The logic is the following: I have a paragraph element <p> with some text, which is left centered (float:left), and after this text, inside this paragraph, I have an horizontal list of social icons, created with <span>, which is aligned to the right (float:right).

Still, it does not work, because icons appear below the text:

enter image description here

This is the fiddle (although icons do not work, because they are imported).

HTML:

<p class="post-meta"> April 7, 2017 
  <span class="share-icons">
    <ul class ="social-icons" style="list-style: none">
      <li class="zocial-twitter"></li>
      <li class="zocial-facebook"></li>
      <li class="zocial-googleplus"></li>
      <li class="zocial-reddit"></li>
    </ul>
  </span>
</p>

CSS:

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
    font-family: 'zocial', sans-serif;
}

.post-title {
    text-align: left;
    font-weight: 700;
}

.post-meta {
    margin-top: 0;
    color: grey;
    font-weight: 700;
    overflow: hidden; 
}

.share-icons {
    float: right;
}

.social-icons li {
    display:inline;
    padding: 5px;
}
Tags:

3

Answers


  1. 0

    You need to cancel the padding-start

        ul.social-icons{
-webkit-padding-start: 0px;
}

    (the default for Chrome, at least, is 40px)

    Login or Signup to reply.
  2. 0

    As Gurtej Singh advise.

    Change your markup. Ul must be outside the paragraph. I added parent element so we can use flex for vertical alignment.

    @import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
    font-family: 'zocial', sans-serif;
}

* {
  margin: 0;
  padding: 0;
}

.flex {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.post-title {
    text-align: left;
    font-weight: 700;
}

.post-meta {
    margin-top: 0;
    margin-right: 15px;
    color: grey;
    font-weight: 700;
    overflow: hidden; 
}

.share-icons {
    float: right;
}

.social-icons li {
    display:inline-block;
    padding: 5px;
}
    <div class="flex">
   <p class="post-meta">April 7, 2017</p>
  <ul class ="social-icons" style="list-style: none">
    <li class="zocial-twitter"></li>
    <li class="zocial-facebook"></li>
    <li class="zocial-googleplus"></li>
    <li class="zocial-reddit"></li>
  </ul>
</div>
    Login or Signup to reply.
  3. 0

    Here is a solution based on your code ,I moved the <span> and clean a class

    https://jsfiddle.net/r1ngjh6k/2/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search