Shape 5

Hi there,

Where/How would I go about adding a yelp icon to the social media icons on the upper right of the website?

Those icons are custom HTML in a text widget located in the Custom 1 position.  You can add whatever icons you want by editing the contents of that widget.

Hi there,

Can you elaborate a bit more? I would like to add this icon - https://www.iconfinder.com/icons/287517/yelp_icon#size=20

I see social_icon ion-social-facebook for example refers to entries in a few css files - editor.css and ionicons.css but adding the icon doesn't seem very straightforward to me. I have done this using a template for joomla and adding an icon was much simpler/easier to understand or at least seemed to be for someone who doesn't have much front end experience.

This code may give you the results you are looking for:

Thank you this worked for me. Here is the code I used:

...
<a class="social_icon ion-social-twitter" target="_blank" href="https://twitter.com/CrossFit">[/url]
<a class="social_icon" target="_blank" href="http://www.yelp.com/biz/zain-elmarouk-crossfit-415-san-francisco"><img src="[siteurl]/images/yelp.png">[/url]
<a class="social_icon ion-social-linkedin" target="_blank" href="https://www.linkedin.com/in/zain-elmarouk-7a684027">[/url]
..

Now the only problem is the yelp icon is not exactly aligned with the rest. The diameter of the icon, however, seems to match up with the rest. What is the best way to fix this?

Attached an image showing the problem.

The following code may work:


If that doesn't align it the way you need, then you can adjust the margin until it aligns correctly.


Technically, this is considered custom coding, and isn't officially covered by support. 

I recommend checking out the Codecademy HTML and CSS course (http://www.codecademy.com/tracks/web) to learn the basics of how HTML and CSS work; it's free, and if you combine that with Firebug (http://getfirebug.com/), you should be able to figure a lot of things out on your own, which is generally faster than waiting on support.

<a class="social_icon ion-social-facebook" target="_blank" href="https://www.facebook.com/CrossFit-415-49231125378/">[/url]
<a class="social_icon ion-social-twitter" target="_blank" href="https://twitter.com/CrossFit">[/url]
<a class="social_icon" target="_blank" style="margin-top:-50px;" href="http://www.yelp.com/biz/zain-elmarouk-crossfit-415-san-francisco"><img src="[siteurl]/images/yelp.png">[/url]
<a class="social_icon ion-social-linkedin" target="_blank" href="https://www.linkedin.com/in/zain-elmarouk-7a684027">[/url]
<a class="social_icon ion-social-rss"
target="_blank" href="http://www.crossfit.com/">[/url]


I have tried padding-top and margin-top and both do not work. Though padding on its own or margin on its own does affect horizontal positioning which is not what I want to achieve. Any other pointers that could quickly address the issue?

I managed to find a link to your site in one of the other threads you've posted, and the Yelp circle looks fine to me.  Did you figure out what needed to be done?

Hi there,

Sorry the link is - http://crossfit-415.com/ as you probably already know now..

No the yelp icon is still a few pixels or so down. Look carefully...and it bugs me so much....I did a quick search yesterday and i noticed that margin-top and padding-top can get ignored unless you have display:inline or inline block put in..but neither of those helped me...

Based on the way you have coded this,  is there anything else i can try?

Using the following code for the image tag works fine for me: 

Yes! that did it. I wasnt putting the code in the right place!

Thanks so much!