Font Awesome Column Type

5 of 122
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 Download
This sets ZGIcon to a FA name directly, no map lookup needed (<zg-icon name="fa-smile-wink"></zg-icon>).
These get mapped to FA equivalents.

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></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" defer></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!

Edit in Studio

Demo Gallery