Forum Support

Shape 5
March 28, 2024, 11:21:57 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: ion icons not centered  (Read 863 times)
dustyken
Jr. Member
**
Offline Offline

Posts: 96



« on: March 11, 2016, 04:57:07 PM »

Forgive me if I missed this topic somewhere, but I'm having an issue with ion icons on my site.  They show up fine, but are not centered.  This only occurs on the Home page mid way down and at the bottom for the social icons.

dev.fellowshipsearcy.org

If you look on another page:
http://dev.fellowshipsearcy.org/index.php/aboutus/our-beliefs

you'll notice that the ion-icons are displayed correctly (in the middle of the page and at the bottom of the page for the social icons).

Any help would be appreciated.

thanks
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: March 12, 2016, 07:24:57 AM »

Hello,

That is really strange, I don't see any reason why they aren't in the center, the code is identical to our demo. The only thing I can think of is if there's a missing closing tag somewhere, but I don't see anything really pointing to that being a reason.

Anyway, adding this code into custom.css should at least correct it:

.icon_area_wrap .icon_outer_wrap .icon_element {
display:block;
padding-top:29px;
}
Logged

Mike Knott
------------
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
dustyken
Jr. Member
**
Offline Offline

Posts: 96



« Reply #2 on: March 12, 2016, 09:02:11 AM »

That worked great!  Thanks!

The only issue I still have is the social icons at the bottom of the page aren't centered either.  Any advice there?

Thanks so much!
Logged
dustyken
Jr. Member
**
Offline Offline

Posts: 96



« Reply #3 on: March 12, 2016, 02:39:29 PM »

Weird... I changed the background for the toprow3 position and that corrected the issue I was having.  When I changed it, the ion icons (after having added the custom css) were not centered again but were at the bottom of the circles.  But...the social icons at the bottom of the page were corrected.  So, I removed the custom css code and all is well.

Not entirely sure what was up, but it's working now.  Those are the most frustrating issues...ones you can't figure out why it's glitching.  Smiley

Thanks again for your help!
Logged
dustyken
Jr. Member
**
Offline Offline

Posts: 96



« Reply #4 on: March 14, 2016, 12:33:20 PM »

Ok...evidently this issue isn't over.  I recently moved this site into production (www.fellowshipsearcy.org), and not only did the icons on the front page mess up again, now, the font resizes to be really small.  When the site loads, it looks like it's going to be the correct size, but then it shrinks.

I added the custom code back to correct the icons in the middle of the page, but that doesn't correct the social icons at the bottom of the page. 

Thoughts?

Thanks.
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #5 on: March 15, 2016, 08:23:58 AM »

Hello,

The icons are showing correct for me and the font size is a normal size as well. You probably clicked the font resizer links at some point, which sets the font sizes by a cookie. Try clearing your browser cookies or simply try in another browser.
Logged

Mike Knott
------------
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
dustyken
Jr. Member
**
Offline Offline

Posts: 96



« Reply #6 on: March 15, 2016, 09:14:02 AM »

Thanks for the info!  You were absolutely correct on the font.  Don't know how it got triggered, but once I cleared my cookies, the font is fine.  But, even with the custom CSS code for the ion icons, the social icons are still not centered.  Are they centered on your viewing?

Thanks.

Dusty
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #7 on: March 15, 2016, 09:54:26 AM »

Hello,

You're referring to the ones in the "We Are Passionate About Community" area correct? Yes, they are showing fine for me.
Logged

Mike Knott
------------
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
dustyken
Jr. Member
**
Offline Offline

Posts: 96



« Reply #8 on: March 15, 2016, 09:59:07 AM »

No...I'm referring to the social icons in the Get In Touch section at the bottom of the page.
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #9 on: March 15, 2016, 11:58:25 AM »

Hello,

You have those setup differently:

<em class="ion-ios-location">&nbsp;

This is the code it should be:

<i class="ion-ios7-location">
Logged

Mike Knott
------------
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
dustyken
Jr. Member
**
Offline Offline

Posts: 96



« Reply #10 on: March 15, 2016, 12:27:12 PM »

Thanks for the response.  I think we keep missing each other here.  The code you just suggested didn't correct the social icons.  That was for the icons on the address.  And making the changes to that removes the icons for the address information.

I'm referencing the social icons as pointed out in the attached screenshot.

Notice how the icons are aligned at the top of their respective boxes and not centered.

Thoughts?

Thanks again!
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #11 on: March 16, 2016, 07:40:15 AM »

Hello,

I think the confusion is from several areas. Your first issue was with the large circle icons in the middle of the page, now it's with something different.

The error I mentioned above is still an error and those icons are not aligning properly either because of this.

For the social icons, I still don't see why your site is performing different because the code is identical to the demo. But either way you can add this:

.social_icon {
height:28px !important;
padding-top:8px !important;
}
Logged

Mike Knott
------------
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
dustyken
Jr. Member
**
Offline Offline

Posts: 96



« Reply #12 on: March 16, 2016, 08:28:54 AM »

Mikek,

Thanks so much for your time and working with me on this.  I implemented the social_icons code and it worked great.

The following code that you sent earlier for the location to align:

Code:
<i class="ion-ios7-location">

Didn't work for me originally because, every time I inserted:

Code:
<i
and
Code:
</i>

JCE Editor changed the code to:

Code:
<em
and
Code:
</em>

when I toggled back from the source code view.  Once I saved it directly from the source code view (without toggle back) it worked fine.  So...as long as I remember to do that each time I edit it, I should be good.  Also, the

Code:
ion-ios7-location

didn't produce an icon.  When I removed the "7", the icon showed up fine.  Maybe I'm doing something wrong, I dunno.

And last, thanks again for continuing to hang in there with me.  I'm sorry if it seemed like I had one issue, it was solved, and then asked for another.  In my first post I pointed out that the ion-icons in the middle of the page (the large ones) weren't aligned and that the social icons at the bottom also weren't aligned.  I thought the two issues were related since the both involved the ion-icons.  Sorry for all of the confusion. 

Thanks again.  I should be good to go!
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #13 on: March 16, 2016, 09:02:23 AM »

Hello,

No problem. Just a tip, I usually turn off the editor completely in global configuration when working on source code like this. The editor always makes odd changes like to the code like you've mentioned.
Logged

Mike Knott
------------
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.