Menu icon Foundation
Create an icon button with Foundation

Hello,

I am new to Zurb Foundation. I am evaluating it. I am trying to create a basic button/anchor tag. My button/anchor tag needs to looks something like this:

+-------------------------+
| [i] | Button Text |
+-------------------------+

The [i] is an icon. The icon will be white. The box surrounding the icon will be orange. The "Button Text" will be black. The background of the rectangle behind "Button Text" will be grey.

How can I do this with Zurb? I currently have:

Now, I'm not sure what to do though

<a target="_blank" href="https://some-url.com">
  <i class="icon-hand"></i>
 </a>
            

         

buttoncss

Hello,

I am new to Zurb Foundation. I am evaluating it. I am trying to create a basic button/anchor tag. My button/anchor tag needs to looks something like this:

+-------------------------+
| [i] | Button Text |
+-------------------------+

The [i] is an icon. The icon will be white. The box surrounding the icon will be orange. The "Button Text" will be black. The background of the rectangle behind "Button Text" will be grey.

How can I do this with Zurb? I currently have:

Now, I'm not sure what to do though

<a target="_blank" href="https://some-url.com">
  <i class="icon-hand"></i>
 </a>
            

         
Nick W. about 5 years ago

Here is the standard syntax for a button.

<a href="#" class="button">Default Button</a>

Now this is what I've did to change the background color of my icon...

  <a href="#" type="submit" class="button">
     <span>
        <i class="fa fa-check"></i>
     <span>
   </a>

I've added a so that in CSS I could target the icon itself. I believe that if you do this around the text as well, you should find a similar result.

Hope I could help!

Eva Sydney over 1 year ago

Thanks for the amazing support and help Bill, now I am off to change the top bar to a floating bar…or something like that, so it might not disappear from the top of the page. I am now heading to UKPaperHelp for more help in my academics.