Forum Support

Shape 5
March 29, 2024, 08:29:04 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Contact us section not showing @ icon  (Read 1367 times)
Lukey
Jr. Member
**
Offline Offline

Posts: 70



« on: 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.

Code:
<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.

Code:
<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
« Last Edit: January 27, 2017, 11:03:39 AM by Lukey » Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #1 on: 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/
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Lukey
Jr. Member
**
Offline Offline

Posts: 70



« Reply #2 on: 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
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #3 on: 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.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Lukey
Jr. Member
**
Offline Offline

Posts: 70



« Reply #4 on: 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
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #5 on: 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:

Code:
.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.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Lukey
Jr. Member
**
Offline Offline

Posts: 70



« Reply #6 on: 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:

Code:
.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?
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #7 on: 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.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Lukey
Jr. Member
**
Offline Offline

Posts: 70



« Reply #8 on: March 21, 2017, 10:27:48 AM »

You're really very good aren't you! Looks well nice now. Thanks - see attached!
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #9 on: 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?
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.