Jump to content


Photo
- - - - -

Social icons not showing inline

css custom social icons font awesome

Best Answer Danny , 20 April 2014 - 12:16 PM

Do as @GetMeWebDesign suggested. However, if you haven't added these breaks, then its likely WordPress doing it's magic. Therefore, you will need to remove all white space between your code.

 

For example, if you have this:

 

<ul>

<li>...</li>

<li>...</li>

<li>...</li>

</ul>

 

You will need to remove the white space so it looks like this:

 

<ul><li>...</li><li>...</li><li>...</li></ul>

Go to the full post


  • Please log in to reply
2 replies to this topic

#1 swiftitnz

swiftitnz

    Newbie

  • Members
  • Pip
  • 5 posts
  • LocationTauranga, New Zealand
  • Country: Country Flag

Posted 20 April 2014 - 03:35 AM

Hi support team,

 

I have just followed the guide on this page: http://docs.pageline...a-branding-area, to add few social icons to the top area of the site I'm working on.

 

You can have a look of the result: http://toddwalters.net/

 

As per the guide on font awesome page of DMS, the social icons are still showing with bullets one below another rather than sideways.

 

Yes, I do have pasted the custom CSS code to DMS toolbar Custom Code section, but no use.

 

Any suggestions?

 

Thanks.

 

Imran



#2 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 20 April 2014 - 10:09 AM

You should be wrapping the html <a href="#" target="_blank"><i class="icon icon-facebook icon-2x"></i></a> like this:

<li>...</li>

 

rather than <br>, which is a soft return and hence stacked


  • swiftitnz likes this

#3 Danny

Danny

    Is Awesome!

  • Moderators
  • 16376 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 20 April 2014 - 12:16 PM   Best Answer

Do as @GetMeWebDesign suggested. However, if you haven't added these breaks, then its likely WordPress doing it's magic. Therefore, you will need to remove all white space between your code.

 

For example, if you have this:

 

<ul>

<li>...</li>

<li>...</li>

<li>...</li>

</ul>

 

You will need to remove the white space so it looks like this:

 

<ul><li>...</li><li>...</li><li>...</li></ul>


  • GetMeWebDesign and swiftitnz like this





Also tagged with one or more of these keywords: css, custom, social, icons, font awesome