How to align Icons under image
-
Hi All,
I am trying to get the three icons to align under the small .gif banner I have.
Please does anyone know any code which could help me achieve this?
-
not sure what Icon are you trying to align?
Hi mmccullion,
there are several ways to do this through some CSS changes. If you are familiar with CSS then you will have to assign a CSS class to the p tag (<p>All-inclusive…</p>) and give it a width (e.g. 550px) and make it float left. Now the icons will automatically float under the .gif banner. Like so:
Assign a CSS class to your p tag:
<p class="[your CSS class here]">All-inclusive...<p>Adjust your CSS:
.[your CSS class here] { width: 550px; float: left; }That is just an example though, there are several other ways to achieve what you want. It also might be necessary that you will have to play a little with width and adjust it properly.
Hope that helps.
Sorry for being thick, here is the current code I have in place for all three icons, how would I amend for the CSS?
<p style=”text-align: center;”><span style=”line-height: 1.5;”> <i class=”fa fa-phone fa-2x” style=”color: #87CEFA;”><span style=”color: transparent; display: none;”>icon-phone</span></i> Phone </span><span style=”line-height: 1.5;”> <i class=”fa fa-envelope fa-2x” style=”color: #87CEFA;”><span style=”color: transparent; display: none;”>icon-envelope fa-2x”</span></i> Email <i class=”fa fa-laptop fa-2x” style=”color: #87CEFA;”><span style=”color: black; display: none;”>icon-laptop</span></i>Web</span></p>
<p style=”text-align: center;”><span style=”line-height: 1.5;”>[/vc_column_text][/vc_column][/vc_row]</span></p>You do not have to apply the CSS class and code to the icons but to this paragraph:
✔ All-inclusive monthly packages from just £75+VAT per month. ✔ Your own dedicated accountant. ✔ FREE company formation. ✔ FreeAgent specialists. ✔ Excellent customer service guaranteed. ✔ Proactive advice. ✔ No hidden fees.The icons will then move up automatically.
If you inspect this paragraph via Firebug, you will see that the paragraph occupies the whole content width because it is a block element – so nothing can stand next to it. By giving the paragraph less width and floating it, you can make space for the icons.
But again, there are several ways to accomplish this, depending on what exactly you want to achieve. In addition you might want to apply further customizations to make this properly responsive, etc.
Hi tried the above,
Seems the text and logo has gone off the page? any ideas?
Thanks
}
.para {
width: 20px;
float: left;
}<p class=”[.para”]✔ All-inclusive monthly packages from just £75+VAT per month.
✔ Your own dedicated accountant.
✔ FREE company formation.
✔ FreeAgent specialists.
✔ Excellent customer service guaranteed.
✔ Proactive advice.
✔ No hidden fees.<p>If you add a CSS class it should look like this:
<p class="para">...</p>Not this:
<p class="[.para"]....I recommend you to undo your changes and try again. If you’re not familiar with coding, it in general probably would be better if you check some HTML/CSS tutorials or hire a freelancer/developer who can help you with customizations on your website.
The topic ‘How to align Icons under image’ is closed to new replies.