Menu icon Foundation
Icons within buttons

Hello all,

I'm hoping one of you guys can help. I'm sure everyone says this but I am new to foundation and web development for that matter (I've been learning / developing about a month).

Basically I am trying to add an icon (I have chosen to use foundations icon fonts for ease) to a button.

I've had a look through the forums and I can find an answer to the above when referring to simple/standard buttons, however I want to achieve this within a form.

I am basically building a checkout page and want to add a paypal logo to the final 'checkout' button.

This was my initial thought:

<input class="button checkout-button" type="submit" name="checkout" value="<i class="fi-paypal"></i>Checkout">
            

         

However this doesn't work - I assume this is because the value is taking the ( " ) before the icon class to be the closing quote and simply adding the remaining code on as text afterwards to create some pretty unattractive results.

Is there a way around this I am overlooking, or an easier way to do this?

Any help would be greatly appreciated.

Cheers,

Ash

buttonsicons

Hello all,

I'm hoping one of you guys can help. I'm sure everyone says this but I am new to foundation and web development for that matter (I've been learning / developing about a month).

Basically I am trying to add an icon (I have chosen to use foundations icon fonts for ease) to a button.

I've had a look through the forums and I can find an answer to the above when referring to simple/standard buttons, however I want to achieve this within a form.

I am basically building a checkout page and want to add a paypal logo to the final 'checkout' button.

This was my initial thought:

<input class="button checkout-button" type="submit" name="checkout" value="<i class="fi-paypal"></i>Checkout">
            

         

However this doesn't work - I assume this is because the value is taking the ( " ) before the icon class to be the closing quote and simply adding the remaining code on as text afterwards to create some pretty unattractive results.

Is there a way around this I am overlooking, or an easier way to do this?

Any help would be greatly appreciated.

Cheers,

Ash

Jesus Lugo about 5 years ago

Hi Ash,

Have you tried to use a element instead?, something like:

<button class="button checkout-button" type="submit" name="checkout" ><i class="fi-paypal"></i>Checkout</button>

Hope this helps