Show a pencil icon when a Table cell has "inline editing" enabled

People are accustomed to seeing a “pencil” icon to indicate that a field is editable. Perhaps your table contains editable cells and non-editable cells, and you want the user to know which cells are editable by simply looking at the page.

This CSS snippet will show a pencil icon when a table cell has “inline editing” enabled. The icon can be shown at all times, or only on hover.

To show the icon on hover only:

/* Show pencil icon on hover of inline editable table cells */
.cell-editable .cell-edit:hover::after {
  display: inline-block;
  position: absolute;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  content: "\00a0\f040";
  text-decoration: none;
  margin-top: 0.1em;
  margin-left: 0.1em;
}

To show the icon at all times:

/* Show pencil icon on inline editable table cells */
.cell-editable .cell-edit::after {
  display: inline-block;
  position: absolute;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  content: "\00a0\f040";
  text-decoration: none;
  margin-top: 0.1em;
  margin-left: 0.1em;
}

Enjoy.

9 Likes

Mahalo, very nice!