Font Awesome Column Type

8 of 124

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.

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/1Y4R3WPJ

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 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!

Edit in Studio

Font Awesome Column Type

Full Code

Demo Gallery