Center text with custom icon

Tagged: 

This topic contains 24 replies, has 2 voices, and was last updated by  robertlo 7 years ago.

Author Posts

robertlo

I see how to add an icon to a class by making it the background with no-repeat. However, I need to add an icon to text that is centered, not left justified. So the icon background is not to the left of the text, since the text is in the center, but the icon to the far left.

So have can I make an icon for text that is centered?


Sebastian

Hi Robert,

You say:

“So the icon background is not to the left of the text, since the text is in the center, but the icon to the far left.”

I’m having trouble making sense of this. Would you be able to post a link to the page you’re working? And/or if you could explain things in a bit more detail that would help me figure out what you’d like to do.

Cheers,
Sebastian


robertlo

Sure. See http://dev.thinkreliability.com/archived-webinars/

The top row with the magnifying lens icon with the words Root Cause Analysis is the issue.

The text Root Cause Analysis is centered. In MT I created a background for it with an image, set on no repeat. That is the magnifying lens icon that is left justified. But the text is centered. So how can I get the icon to be just before the text, as it is just below that.

I can actually use what I did just below it if needed. For that, I inserted the image and typed the text after it, but I applied a class to that text, and then in MT I added left paddign to it. It tried to move it up with the position, padding and margin options, but none of those had any effect on the text. It’s like left and right space was editable, but top and bottom was not. However, I was able to move it using the Vertical Align option, which I set to text-top for best results, but that was just coincidental.

So ideally, I’d like to do it the first way.

Did that help? I hope I am being clear.

Thanks,
Rob


Sebastian

Ah I see what you’re trying to do now. This solution isn’t obvious, but it should be fairly simple.

  1. Set the display property to inline-block.
  2. Set margin-left and margin-right to auto.
  3. Set padding-left to around 50px to accommodate the icon.

Inline block make the h2 element only as wide as it’s text (it’s block by default which fill the whole line). You set margin right and left to auto to center the text. Then you just give the heading some left padding so it doesn’t overlap with the icon.

I hope that helps, please let me know if you have further questions.
Cheers,
Sebastian


robertlo

Sebastian,

Unfortunately, those instructions didn’t work.

The content did not center, and the I guess the div needs to be made taller because part of the icon is being chopped off. And then the icon and text would need to be centered horizontally with each other.

Any ideas?


robertlo

Sure.

See the first button under the first product on http://preachnet.com/freeindeed/

It is orange with dark blue text, and green with dark blue text on hover. I just want to make the text white on and off hover.


Sebastian

Sorry, my mistake Robert. Regarding the issue with your icon and heading here: http://dev.thinkreliability.com/archived-webinars/

  1. Remove the inline-block display property. You can only use the margin auto trick on block level elements (I forget which properties of inline vs block that the inline-block display value uses).
  2. Keeping the h2 as a block level element means you will have to explicitly set the width in order for it not to fill the entire row (so the text is centred). Set the width to 245px.
  3. Finally, you can address the clipped icon problem by setting top and bottom padding to 10px.

With regards to your question about the buttons here: http://preachnet.com/freeindeed/

I’m only seeing shortcodes for buttons, not actual buttons. Have you disabled something that could cause your theme to render the shortcode on screen?


robertlo

Sebastian,

Your’re the man. For http://dev.thinkreliability.com/archived-webinars/ that worked perfectly. Not only do I have it working perfectly now, but I’ve also learned how to css that look in general now.

Thanks so much!

Regarding http://preachnet.com/freeindeed/, there is only one actual button. All the others are shortcodes. The actual button I am having the issue with is only the top orange button for the first product: “A Celebration of Discipline: Guidance”

See this screenshot to see exactly the button in question: http://www.awesomescreenshot.com/image/591951/06acba194abf99882633edcf4bd20c73

Thanks,
Rob


Sebastian

Hey Rob,

I’m glad you sorted the issue on think reliability. With regards to the freeindeed page, it looks like we’re seeing different things. I see only shortcode text on the page where you have rendered buttons:

only shortcodes

Could this be a caching issue where logged in users see things correctly? What happens when you view the site in a different browser/device?


Sebastian

Have you set up apache virtual hosts on your local machine? Sometimes I do that and forget whether I’m viewing the live site or the copy of the live site on my local machine.


robertlo

That is very strange. There is no virtual host set up locally. And I see the same site with all the buttons showing correctly whether I’m logged in or out.

And have no idea why the shortcode isn’t rendering the buttons at all in your browser. Looking at it, it appears to just be the shortcodes ultimate shortcodes that are not rendering. I also have Groups content restriction shortcodes in the product short descriptions, but they are not showing your view. So those are working normally.

But both the buttons and audio players generated from Shortcodes Ultimate shortcodes are not displaying for you.

What browser are you using? Not that that would make a difference because it has always worked fine for me in any browser and on any device. So I have no idea what is going on wrong with your view,

But for that first product, there is an html button above the shortcode button.

But I’m at a total loss of what to do at this point. What do you think?


Sebastian

Well, if it’s working for you in every browser and on every device my best guess that a server level caching service is showing me one cached or live version based on my goegraphic location, and you another cached or live version based on your geographic location. You would need to contact your web host to ask them about server level caching (as opposed to site level caching that happens when you use a WordPress caching plugin like WP Total cache). They may use something like CloudFlare.

The other problem of course if the fact that the shortcodes are displaying instead of the generated content. I recommend contacting ‘Shortcodes Ultimate’ about this. They can hopefully tell you what could be causing the shortcode code to display. And that may give us more clues…


robertlo

Sebastian,

I think you’re right. The host has just flushed the server’s cache. Can you check if you see everything correctly now?

Thanks,
Rob


Sebastian

Hi Rob, unfortunately I’m still getting the same shortcode code displaying. This also happens when I open your site in a browser I’ve never visited your site with, which rules out browser caching.

My best advice at this stage is to tell your web host I’m still seeing a different version to you. Perhaps there is such a thing as a deep flush!? I’m reaching here. I’m stumped.


robertlo

Sebastian,

Could you provide me with your IP and the country you are in so I can give that to me host.

Also, I just disabled CloudFlare altogether, which ironically sped up my site some. I was going to end up disabling CloudFlare altogether anyway so I could use MaxCDN instead.

Maybe CloudFlare was the problem. Can you clear your cache and see if the site shows normally now please.

Thanks,
Rob


Sebastian

Sure. My IP is 2.220.225.154 and I’m in the UK. I’m still getting the broken page unfortunately (I’ve cleared my cache and restarted two different browsers).


robertlo

I am going to contact my host with your info.

How about trying this. My site has an SSL, although I haven’t forced it to https yet. Try it on https and see if that makes a difference. It doesn’t for me, but I’m just trying to think of any possible contributor to this issue.

Thanks,
Rob


robertlo

Sebastian,

Please check again (with our without https). I just realized I had my html wrong for the button code.

I noticed that my html buttons weren’t working on Firefox. So then I looked at the button code I had for all of them.

I had:

<center><button class=”partner-button” type=”button”><b>Become A Partner &
Access All Sermons</b>
</button></center>

I now changed it to:

<center><button class=”partner-button” type=”button”><b>Become A Partner &
Access All Sermons</b></button>
</center>

And that fixed my issues of the button not working on Firefox, and it also fixed the issues of the text color not showing correctly. So my original issue was just my mistake in the html apparently.

But I am curious to see if you can now see the buttons, and if the shortcode button below it is showing correctly now or not.

Please let me know.


Sebastian

Well at least that’s one problem solved! Unfortunately I couldn’t get the page to load with https: https://preachnet.com/freeindeed/. The shortcodes remain.


robertlo

Ugh….well at least you’re finding problems for me to fix…lol

1. Are you able to see the html buttons styled with MT now? They are above the [su_button] buttons.

2. Can you send another screenshot if you see anything different now, so that my host can have your latest screenshot?

3. You https://preachnet.com/freeindeed/ is not loading? What error is happening? Timing out? Not resolving? DNS error?

Thanks so much for all your help. You’re #1!


Sebastian

I think everything is exactly the same unfortunately:

still showing shortcodes

This is what firefox says on the https URL:

Unable to connect

Firefox can’t establish a connection to the server at preachnet.com.

– The site could be temporarily unavailable or too busy. Try again in a few moments.
– If you are unable to load any pages, check your computer’s network connection.
– If your computer or network is protected by a firewall or proxy, make sure that Firefox is permitted to access the Web.


robertlo

Wow. This is a very strange situation. Would you mind calling a friend at another location in your country and see if they can see the site? I hope I’m not asking you to do too much, but I really want to see if this is happening to other people in the UK, or just some gliche getting the site to show for you at your ISP


robertlo

Sebastian,

Also, are you getting this same broken page results on multiple devices?


Sebastian

Hi Rob, actually I just checked on my phone and it looks fine on that. I’m still getting the same shortcodes on every browser on my laptop. So I guess it’s not location specific. This problem seems to persist because my computer refuses to load the most up to date version of your site. Even after clearing the browser caches.


robertlo

Well thanks for taking all this time looking in to this issue. For now I’ll just write it off as something weird between my site and your computer. If I hear back from others about this once the site launches, I’ll deal with it then.

MT still works great!

You must login or register to reply to this topic.