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?
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.
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.
Ah I see what you’re trying to do now. This solution isn’t obvious, but it should be fairly simple.
Set the display property to inline-block.
Set margin-left and margin-right to auto.
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
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.
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).
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.
Finally, you can address the clipped icon problem by setting top and bottom padding to 10px.
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”
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:
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?
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.
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?
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…
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.
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.
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).
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.
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.
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.
I think everything is exactly the same unfortunately:
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.
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
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.
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.
.
.