Code for putting icon inside box ? :O

  • Resolved ashdiaz777

    (@ashdiaz777)


    8 years, 10 months ago

    Hey Guys

    I was wondering if anyone can help me create a html
    code for putting an icon inside a box and have it sit correctly as shown in the picture below.

    I’ve managed achieve this (square with icon inside) but its all wonky etc.
    In the link is my website, the top row of images in the 3 boxes is the look i want to achieve,, the ones below are my plan ‘b’ which I’m not too fond of.

    any help would be appreciated.

    https://transcriptsaustralia.com.au

    😀
    Ash

    • This topic was modified 8 years, 10 months ago by ashdiaz777.
Viewing 8 replies - 1 through 8 (of 8 total)
  • Konstantinos Xenos

    (@xkon)

    8 years, 10 months ago

    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

    Thread Starter ashdiaz777

    (@ashdiaz777)

    8 years, 10 months ago

    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 8 years, 10 months ago by ashdiaz777.
    Konstantinos Xenos

    (@xkon)

    8 years, 10 months ago

    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://wordpress.org/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

    iqbal1486

    (@iqbal1486)

    8 years, 10 months ago

    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.

    Thread Starter ashdiaz777

    (@ashdiaz777)

    8 years, 10 months ago

    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 🙂

    Konstantinos Xenos

    (@xkon)

    8 years, 10 months ago

    columns
    [ 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

    Thread Starter ashdiaz777

    (@ashdiaz777)

    8 years, 10 months ago

    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 😀

    Konstantinos Xenos

    (@xkon)

    8 years, 10 months ago

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

    Best regards,
    Konstantinos

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Code for putting icon inside box ? :O’ is closed to new replies.

Tags