Some help with icons on the Shift theme

RapidWeaver Classic General
1

Hi

If you take a look at the demo site HERE you can see that the icons on the homepage have a big circle around them whereas the icons on the ‘built-in tools>gridly stack’ page do not. I can’t for the life of me work out how to make the images on the gridly stack page have the same circles around them that they icons on the home page do.

I have downloaded the demo and taken a look and the home page is done just in HTML by the looks of things whereas the gridly stack page is done with html stacks etc

so the homepage is as follows when i look at it

"<!-- ec two -->
<div id="myExtraContent2">
	<!-- grid demo -->
	<div class="row">
		<section class="3u 6u(2) 12u$(3) align-center">
			<span><i class="icon fa-desktop"></i></span>
			<h3>Responsive Design</h3>
			<p>This theme is a responsive design, which means that the layout will change to accommodate all screen sizes big and small.</p>
		</section>"

With this the icons have a circle around them

but when i copy the relevant section from above into an HTML stack they appear without a circle around them

"<span><i class="icon fa-desktop"></i></span>"

Can anyone explain to me what it is that makes the icons have circles around them on the home page and how i can incorporate that into an HTML stack on another page ?

2

Looks like it’s this bit of CSS that’s defining the circles.

.wrapper span i {
    border-radius: 100%;
    border: solid 3px;
    display: block;
    height: 7em;
    line-height: 6.75em;
    text-align: center;
    width: 7em;
    margin: 0 auto 30px auto;
}

Try applying that to the page and see what happens.

Rob

3

Thank you for the quick response.

This seems to have worked however the icons have not resized themselves (made themselves smaller) like on the home page, so the circles are not actually big enough for the icons. I notice you can resize the circles to make them bigger but id rather it look the same as on the home page where the icons are reduced in size… however being a bit of a noob I’m not sure what code it is thats resizing them.

Thanks for the help

4

I don’t have the theme I’m afraid. If you go to Weaverthemes and ask I’ve always found them very helpful.

5

No problem, i’ll do that.

Thanks again for the help

6

Thanks @robbeattie for your help :wink:
@moose Can you try this instead?

.wrapper span i {
    border-radius: 100%;
    border: solid 3px;
    display: block;
    height: 7em !important;
    line-height: 6.75em !important;
    text-align: center;
    width: 7em !important;
    margin: 0 auto 30px auto;
}

Let me know if that worked