Most of you know the default APEX edit icons you can choose from inside your Interactive Report.
Basically you use them to link to a detail page.
![]()
The icon source looks like this.
![]()
A typical result page.
![]()
Two things I would like to change:
1. The Icon should be a nice looking car symbol from the Font Awesome library.
2. The column width should be as small as the icon and not relative to the page width.
We change the pencil.png towards the nice looking automobile icon from Font Awesome.
Code:
<span class="fa fa-automobile"></span>
![]()
Then we add a little CSS snippet to the page inline CSS.
Code:
.minimize-first-table-col td:first-child{
width: 1%;
overflow: visible;
font-size:120%;
padding: 8px;
}
![]()
![]()
The result will looks like this.
![]()
Basically you use them to link to a detail page.
The icon source looks like this.
A typical result page.
Two things I would like to change:
1. The Icon should be a nice looking car symbol from the Font Awesome library.
2. The column width should be as small as the icon and not relative to the page width.
We change the pencil.png towards the nice looking automobile icon from Font Awesome.
Code:
<span class="fa fa-automobile"></span>
Then we add a little CSS snippet to the page inline CSS.
Code:
.minimize-first-table-col td:first-child{
width: 1%;
overflow: visible;
font-size:120%;
padding: 8px;
}
And as a last step we add the class minimize-first-table-col inside the Interactive Report > Appearance > CSS Classes.
The result will looks like this.
