How to use glyphter svg icon in Button?

Platform: jQuery |

Control: ejmButton |

Published Date: March 9, 2015 |

Last Revised Date: May 10, 2019

Tags: button, mobile

You can create image only button with svg icon by using imageclass property. Refer to the following steps to achieve this.

First, refer to the glyphter.css file to the sample. Example, here it is referred with file name glyphter.css that is generated from the glyphter generator.

glyphter.css

/* Generated by Glyphter (http://www.glyphter.com)*/

@font-face {

font-family: 'sample';

src: url('../fonts/glyphter.eot');

src: url('../fonts/sample?#iefix') format('embedded-opentype'),

url('../fonts/sample.woff') format('woff'),

url('../fonts/sample.ttf') format('truetype'),

url('../fonts/sample.svg#sample') format('svg');

font-weight: normal;

font-style: normal;

}

[class^='icon-']:before{

display: inline-block;

font-family: 'glyphter';

font-style: normal;

font-weight: normal;

line-height: 1;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale

}

.icon-down:before{content:'\0041';}

.icon-up:before{content:'\0042';}

.icon-left:before{content:'\0043';}

.icon-right:before{content:'\0044';}

Then, you need to overwrite the font family. Here, sample is set as a font-family while generating the font. Refer to the following code example.

button.html

<!DOCTYPE html>

<html>

<head>

<title>Button</title>

<style>

.glyphter {

/*Set font family style as sample*/

font-family: glyphter !important;

}

</style>

</head>

<body>

</body>

</html>

Next, set the desired image to the button. For that we have to set the imageClass property as the image class that is generated from the gliphter generator. Add the font-family class with the custom icon’s image class. Refer to the following code example.

button.html

<tr>

<td>

Button Up

</td>

</td>

</tr>

<tr>

<td>

Button Down

</td>

</td>

</tr>

</table>

Use the following styles to align the custom icon properly while using in button.

button.html

<style>

.e-m-btnwrapper.e-m-ios7.e-m-btn-image .e-m-btn-tag {

padding: 5px 10px;

}

.e-m-btnwrapper.e-m-flat.e-m-btn-image .e-m-btn-tag {

padding: 8px 7px;

}

</style>

Output:

Mobile image button

Did you find this information helpful?

How to use glyphter svg icon in Button?

glyphter.css

button.html

button.html

button.html

Output:

Please sign in to access our KB

CONTACT US