Shape 5

Wordpress Club Themes => Risen Hope - Club => : Lukey January 27, 2017, 10:59:01 AM



: Contact us section not showing @ icon
: Lukey January 27, 2017, 10:59:01 AM
Hi All,

I'm updating the "Contact Us" in Sidebar Position: Bottom Row 3.1 (pictured, as always) and having added the following code the G+, Fb and Tw have their background colours but if I use the following code it seems that the @ is there but only if you click on it. Otherwise its hidden.

:
<a href="https://www.facebook.com/clientspage" class="social_icon ion-social-facebook"></a> 
<a href="https://twitter.com/clientspage" class="social_icon ion-social-twitter"></a>
<a href="https://plus.google.com/clientspage" class="social_icon ion-social-googleplus"></a>
<a href="http://clientspage/pages/theme-contact-us-page" class="social_icon ion-at"></a>
</a>

Update:
It's not a "social_icon" so took that bit out and now I have something showing but its not very substantial.

:
<a href="http://clientpage/themepages/contact-us" class="ion-paper-airplane"></a> 

</a>

How do I add a background colour or is there a better ion icon to use please?

Many thanks,
Lukey


: Re: Contact us section not showing @ icon
: Tristan Rineer January 27, 2017, 01:15:12 PM
The "social_icon" class is just the style for that position, it's not defining the image as being social.  If you don't have that class, it won't match the other icons.

You may be able to find a better icon here: http://ionicons.com/


: Re: Contact us section not showing @ icon
: Lukey March 21, 2017, 01:06:54 AM
Good Morning,

I'm still not happy with the tiny email envelope icon. I've looked at Ionicons and tested them out but not getting much joy. Do you have a list/swatch of the icons that this template will recognise and, if possible, how they'll look? Otherwise I'll just have to remove the icon because it looks naff next to the others (thats British for "not very good at all and could be better").

Thanks in advance,

Luke


: Re: Contact us section not showing @ icon
: Tristan Rineer March 21, 2017, 09:46:52 AM
Are you able to provide a link so I can see what's happening?  It might be possible to tweak it in CSS.  As for the icon options, I believe the list on the Ionicons site is the full list of what's available.


: Re: Contact us section not showing @ icon
: Lukey March 21, 2017, 09:50:32 AM
Are you able to provide a link so I can see what's happening?  It might be possible to tweak it in CSS.  As for the icon options, I believe the list on the Ionicons site is the full list of what's available.
Hi, have PMd you - the worst kind of reply to anyone else reading this with the same query I know!

Luke


: Re: Contact us section not showing @ icon
: Tristan Rineer March 21, 2017, 09:57:58 AM
There are 2 things that need to be done to get it looking the way you want.  First, add back the "social_icon" class; that is what makes the icon the same size & style as the others in that section (including making it white - which is why it appears to be invisible, but step 2 will fix that).  Second, add the following CSS to the bottom of the theme's style.css file:

:
.social_icon.ion-email {
background: #662d91;
}

Note: You'll have to change the color code in that new CSS if you decide to have a different highlight color for the site.


: Re: Contact us section not showing @ icon
: Lukey March 21, 2017, 10:21:53 AM
There are 2 things that need to be done to get it looking the way you want.  First, add back the "social_icon" class; that is what makes the icon the same size & style as the others in that section (including making it white - which is why it appears to be invisible, but step 2 will fix that).  Second, add the following CSS to the bottom of the theme's style.css file:

:
.social_icon.ion-email {
background: #662d91;
}

Note: You'll have to change the color code in that new CSS if you decide to have a different highlight color for the site.

Ok, do I just add that right at the bottom of the style.CSS or somewhere in particular?


: Re: Contact us section not showing @ icon
: Tristan Rineer March 21, 2017, 10:25:12 AM
It doesn't have to go anywhere specific; it's not overriding anything, just adding a value that wasn't previously defined.


: Re: Contact us section not showing @ icon
: Lukey March 21, 2017, 10:27:48 AM
You're really very good aren't you! Looks well nice now. Thanks - see attached!


: Re: Contact us section not showing @ icon
: Tristan Rineer March 21, 2017, 10:45:02 AM
I'm glad I was able to help.  Was there anything else related to this issue, or is this thread ready to be locked?