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

    Member

  • DMS Subscriber†
  • 14 posts
  • LocationTauranga, New Zealand
  • Framework Version:DMS 2
  • 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

  • DMS Subscriber†
  • 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
  • 19532 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