Glyph icon in input type button

HTML & CSS
1

Hi

Can anyone tell me how to use glyph icon in input type button to submit a form.

I want to use search icon from

<form>
                <input name="search" type="text" class="search_input">
                <span class="icon icon-search"></span>
                </form>

The Search icon is displaying fine.
But how to make it as submit button.

Thanks
Vineet

2

You can wrap input and span with div, then stylize that div to look like button.
Of course you should remove border and background from real button

3

Change the HTML to <input type="submit" class="icon icon-search" value="Submit">

4

You could also use a button

<button type="submit">
<span class="icon icon-search"></span>
<span class="submit-text">Search</span>
</button>

Use some CSS to hide the .submit-text element as needed

5

That won’t submit the form without Javascript.

6

Not good practice relying on JS to submit a form?

7

What about all those poor users who have it disabled? It’s a very very simple change (using input type=“submit” apposed to button) which will ensure a basic feature of a website works.

So yes, it’s poor practice.

Both input/button will give us a button. Only one will allow us to submit the form (functionality which we are going for, and which JS would band-aid fix.)

8

A button of type=“submit” will submit the form ok.

9

Whoops. I saw <button and figured it would be type=“button”. Good catch.

10

Thanks for all the replies.

So if both will submit the form, then whats the difference between both

input type=“submit”
button type=submit"

thanks
vineet

11

The button element can contain phrasing html elements which means that you can style it to your heart’s content and add text icons images and wrapping lines unlike the input element.

I believe there were issues in older version of IE (less than ie8) but that’s not an issue these days (mostly).

12

Hi Paul

I would like know why i am not able to generate the code for all 4 types of fonts (svg, eot, ttf,woff)

The font folder contains all 4 types of fonts.

But the css generate not for all 4 types.

my css is below

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot');
}
@font-face {
    font-family: 'icomoon';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBrAAAAC8AAAAYGNtYXAWz9NjAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZtcdXCgAAAFwAAAA5GhlYWQFjUXXAAACVAAAADZoaGVhB6oDxgAAAowAAAAkaG10eAYAAAAAAAKwAAAAFGxvY2EAKACGAAACxAAAAAxtYXhwAAgAOwAAAtAAAAAgbmFtZVcZpu4AAALwAAABRXBvc3QAAwAAAAAEOAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADphgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOmG//3//wAAAAAAIOmG//3//wAB/+MWfgADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/9gD6APAACMAOAAAJScuAQc+ATU0LgIjIg4CFRQeAjMyNjcGFh8BHgE3NiYnJSIuAjU0PgIzMh4CFRQOAiMD4PITJxArMTxpi1BQi2k8PGmLUEeAMgEQEc4bSxsaBB79oDVdRigoRl01NV1GKChGXTVZzhEQATKAR1CLaTw8aYtQUItpPDErECcT8h4EGhtLG+coRl01NV1GKChGXTU1XUYoAAAAAQAAAAEAAG8vzepfDzz1AAsEAAAAAADRQwChAAAAANFDAKEAAP/YA+gDwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAD6AABAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAIAAAAEAAAAAAAAAAAKABQAHgByAAEAAAAFADkAAgAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype');
    font-weight: normal;
    font-style: normal;
}
.icon {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
    content: "\e986";
}

If you will see the article on sitepoint (see bottom of this article)

The code generates is for all 4 types of fonts

@font-face {    font-family: 'icomoon';    
src:url('fonts/icomoon.eot?-88cxph');    
src:url('fonts/icomoon.eot?#iefix-88cxph') format('embedded-opentype'),  
url('fonts/icomoon.woff?-88cxph') format('woff'),        
url('fonts/icomoon.ttf?-88cxph') format('truetype'),        
url('fonts/icomoon.svg?-88cxph#icomoon') format('svg');    
font-weight: normal;    font-style: normal;}

So how can i generate similar code.

Thanks
Vineet

13

Sorry, I am not familiar with that article but have you tried uploading your font to font-squirrel and using their generator? They have a base64 option also if that is what you need and should generate the complete package.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.