How to use glyphter svg icon in Button?
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> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" /> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="description" content="syncfusion" /> <meta name="author" content="syncfusion" /> <title>Button</title> <link href="themes/ej.mobile.all.min.css" rel="stylesheet" type="text/css" /> <link href="themes/css/glyphter.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="scripts/ej.mobile.all.min.js" type="text/javascript"></script> <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
<table id="table"> <tr> <td> Button Up </td> <td class="btnsht"> <button id="button11" type="button" data-role="ejmbutton" data-ej-contenttype="image" data-ej-imageclass="glyphter icon-up"></button> </td> </tr> <tr> <td> Button Down </td> <td class="btnsht"> <button id="button1" type="button" data-role="ejmbutton" data-ej-contenttype="image" data-ej-imageclass="glyphter icon-down"></button> </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:
