Font Awesome Column Type
ZingGrid provides a
<zg-column type="icon">
column type and setting the icon-set="fontawesome"
attribute on the <zing-grid>
tag will allow you to render our default icons or Font Awesome icon easily. There is no cell editor for icon column types.Result Full HTML CSS JS
Edit DownloadFull Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid: Blank Grid</title> <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script> <style> body { background: #e6e6e6; } .wrap { margin: 0 auto; max-width: 800px; padding-top: 50px; } zg-cell:nth-of-type(2) { --zg-cell-background: #fffced; border-left: 1px solid #fff0a3; border-right: 1px solid #fff0a3; } zing-grid[loading] { height: 1741px; } </style> </head> <body> <!-- our site requires external links and scripts to be inside the body tag --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> <div class="wrap"> <zing-grid caption="Map Font Awesome Icons to <code>zg-icon</code>" icon-set="fontawesome"> <zg-data data='[ { "name": "cancel", "fontAwesome": "fa-times" }, { "name": "cancelrecord", "fontAwesome": "fa-times" }, { "name": "close", "fontAwesome": "fa-times" }, { "name": "checked", "fontAwesome": "fa-check-square" }, { "name": "checkmark", "fontAwesome": "fa-check" }, { "name": "delete", "fontAwesome": "fa-trash" }, { "name": "down", "fontAwesome": "fa-arrow-down" }, { "name": "error", "fontAwesome": "fa-exclamation-circle" }, { "name": "edit", "fontAwesome": "fa-edit" }, { "name": "editrecord", "fontAwesome": "fa-edit" }, { "name": "firstpage", "fontAwesome": "fa-angle-double-left" }, { "name": "fixedmenu", "fontAwesome": "fa-bars" }, { "name": "info", "fontAwesome": "fa-info-circle" }, { "name": "lastpage", "fontAwesome": "fa-angle-double-right" }, { "name": "layoutcard", "fontAwesome": "fa-th-large" }, { "name": "layoutrow", "fontAwesome": "fa-th-list" }, { "name": "link", "fontAwesome": "fa-link" }, { "name": "menu", "fontAwesome": "fa-ellipsis-v" }, { "name": "nextpage", "fontAwesome": "fa-angle-right" }, { "name": "outsidearrow", "fontAwesome": "fa-external-link-alt" }, { "name": "prevpage", "fontAwesome": "fa-angle-left" }, { "name": "reload", "fontAwesome": "fa-redo-alt" }, { "name": "remove", "fontAwesome": "fa-times" }, { "name": "removerecord", "fontAwesome": "fa-trash" }, { "name": "search", "fontAwesome": "fa-search" }, { "name": "submitrecord", "fontAwesome": "fa-check" }, { "name": "success", "fontAwesome": "fa-check-circle" }, { "name": "unchecked", "fontAwesome": "fa-square" }, { "name": "up", "fontAwesome": "fa-arrow-up" }, { "name": "warning", "fontAwesome": "fa-exclamation-triangle" }, { "name": "fa-smile-wink", "fontAwesome": "fa-smile-wink" } ]'></zg-data> <zg-colgroup> <zg-column index="name" header="Icon Name"></zg-column> <zg-column index="fontAwesome" header="Font Awesome" type="icon"></zg-column> </zg-colgroup> <zg-source> <zg-icon name="fa-smile-wink"></zg-icon> <span>This sets ZGIcon to a FA name directly, no map lookup needed (<zg-icon name="fa-smile-wink"></zg-icon>).</span> <br> <zg-icon name="error"></zg-icon> <zg-icon name="nextpage"></zg-icon> <zg-icon name="delete"></zg-icon> <zg-icon name="close"></zg-icon> <span>These get mapped to FA equivalents.</span> </zg-source> </zing-grid> </div> <script></script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid: Blank Grid</title> <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script> </head> <body> <!-- our site requires external links and scripts to be inside the body tag --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> <div class="wrap"> <zing-grid caption="Map Font Awesome Icons to <code>zg-icon</code>" icon-set="fontawesome"> <zg-data data='[ { "name": "cancel", "fontAwesome": "fa-times" }, { "name": "cancelrecord", "fontAwesome": "fa-times" }, { "name": "close", "fontAwesome": "fa-times" }, { "name": "checked", "fontAwesome": "fa-check-square" }, { "name": "checkmark", "fontAwesome": "fa-check" }, { "name": "delete", "fontAwesome": "fa-trash" }, { "name": "down", "fontAwesome": "fa-arrow-down" }, { "name": "error", "fontAwesome": "fa-exclamation-circle" }, { "name": "edit", "fontAwesome": "fa-edit" }, { "name": "editrecord", "fontAwesome": "fa-edit" }, { "name": "firstpage", "fontAwesome": "fa-angle-double-left" }, { "name": "fixedmenu", "fontAwesome": "fa-bars" }, { "name": "info", "fontAwesome": "fa-info-circle" }, { "name": "lastpage", "fontAwesome": "fa-angle-double-right" }, { "name": "layoutcard", "fontAwesome": "fa-th-large" }, { "name": "layoutrow", "fontAwesome": "fa-th-list" }, { "name": "link", "fontAwesome": "fa-link" }, { "name": "menu", "fontAwesome": "fa-ellipsis-v" }, { "name": "nextpage", "fontAwesome": "fa-angle-right" }, { "name": "outsidearrow", "fontAwesome": "fa-external-link-alt" }, { "name": "prevpage", "fontAwesome": "fa-angle-left" }, { "name": "reload", "fontAwesome": "fa-redo-alt" }, { "name": "remove", "fontAwesome": "fa-times" }, { "name": "removerecord", "fontAwesome": "fa-trash" }, { "name": "search", "fontAwesome": "fa-search" }, { "name": "submitrecord", "fontAwesome": "fa-check" }, { "name": "success", "fontAwesome": "fa-check-circle" }, { "name": "unchecked", "fontAwesome": "fa-square" }, { "name": "up", "fontAwesome": "fa-arrow-up" }, { "name": "warning", "fontAwesome": "fa-exclamation-triangle" }, { "name": "fa-smile-wink", "fontAwesome": "fa-smile-wink" } ]'></zg-data> <zg-colgroup> <zg-column index="name" header="Icon Name"></zg-column> <zg-column index="fontAwesome" header="Font Awesome" type="icon"></zg-column> </zg-colgroup> <zg-source> <zg-icon name="fa-smile-wink"></zg-icon> <span>This sets ZGIcon to a FA name directly, no map lookup needed (<zg-icon name="fa-smile-wink"></zg-icon>).</span> <br> <zg-icon name="error"></zg-icon> <zg-icon name="nextpage"></zg-icon> <zg-icon name="delete"></zg-icon> <zg-icon name="close"></zg-icon> <span>These get mapped to FA equivalents.</span> </zg-source> </zing-grid> </div> </body> </html>
body { background:#e6e6e6; } .wrap { margin: 0 auto; max-width: 800px; padding-top: 50px; } zg-cell:nth-of-type(2) { --zg-cell-background:#fffced; border-left:1px solid #fff0a3; border-right:1px solid #fff0a3; }
Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!