Code for putting icon inside box ? :O

Hello,

What am I missing here to be able to help? An image link? I see all 6 boxes with icons inside that are centered etc ( they just don’t have a mobile version css ), but I don’t understand what you need help with ?

Best regards,
Konstantinos

Hi Xenos

thanks for the reply,,,the above boxes are the original script i was given with my wordpress theme but i wasn’t able to edit further (extending the boxes, adding colour to particular word etc) so i created the boxes below but am unable to replica the above icons in the top 3 boxes…

Im just not sure how make a html code which does this so i can input it into ‘my’ 3 boxes which are shown below

site is just intended for computer.

thanks again any help would be appreciated ??

• This reply was modified 7 years, 7 months ago by ashdiaz777.

Now that I understood you can modify your css a little bit ?? .

.mycolumns i {
    font-size: 20px !important;
    color: #FFF !important;
    background: #4498e7 !important;
    height: 40px !important;
    width: 40px !important;
    line-height: 40px !important;
    transform: rotate(45deg) !important;
}

.mycolumns i:before {
    display:inline-block !important;
    transform: rotate(-45deg) !important;
}

If you add this code you will have exactly the same icons as the above boxes.

Either add them at the end of your custom css file or just modify your existing ones.

If you don’t know where exactly to edit the code you can add this plugin: https://www.ads-software.com/plugins/custom-css-js/ and paste the code that I gave you in the CSS area and tell it to load in the footer.

Hope this helps.

Best regards,
Konstantinos

i.fa{
    transform: rotate(45deg);
    background: green;
    width: 50px;
    height: 50px;
    color: white;
    }

i.fa:before {
    transform: rotate(-45deg);
    display: inline-block;
}

Hope above css will solve your issue.
Please use the necessary class to avoid conflict with other icons.

Hi iqbal 1486,

thanks for taking the time to reply (same to xenos)

would i just apply this code to my ‘edit page’ html section,
also i’m adding the icon code to both (see example below) and it doesn’t seem to work
any thoughts on this?

These icons will be the end of me ahaha ??

i.fa fa-cloud-upload{
transform: rotate(45deg);
background: green;
width: 50px;
height: 50px;
color: white;
}

i.fa fa-cloud-upload:before {
transform: rotate(-45deg);
display: inline-block;
}

Thanks,
Ash ??

[ right click open image in new window ]

There’s no point of targeting specific <i> elements as you are using already a global ‘custom’ css tag for your boxes which is the mycolumns you can just target all of them, simple and more efficient code and it will only affect the <i> that are in those boxes nothing else. The only case to use your idea would be to have different colors on each one etc.

Either way for learning purposes:

i.fa fa-cloud-upload is wrong that’s why it’s not working.
i.fa.fa-cloud-upload is what you want. Multiple continuous tags are to be next to each other, if you prefer this approach ??

If you don’t want to use a .CSS file nor the plugin that I proposed to you your best option to be sure that they will load correctly is either before the </head> tag of your html or your </body> ( enclose the css styles with <style></style> of course ). The </head> and </body> depends on how your existing css are loading, either inline, async etc or in head as normal. I can’t be sure of what you will do with either optimize / cache / minification plugins and methods so I’m telling you all 3 options either way. That’s something that you have to test by putting it in each position to check what works best.

Best regards,
Konstantinos

Hey Konstantinos ??

Thank you so much!!! It has worked perfectly!
You saved me another day of experimenting so i can now move on to other
elements of my site ??

Sincerely Thank you,
Ash ??

Perfect! Glad I could help. If you need anything else feel free to ask in a new topic.

Best regards,
Konstantinos