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.