font awesome icon inside a p-column

UI Components for Angular
Post Reply
richleach
Posts: 16
Joined: 21 Jan 2018, 01:59

30 Apr 2018, 19:40

I need to use a font awesome icon in a p-column. This is all inside of a p-datatable tag (yes, I know it's been deprecated). :roll:

Does anyone know how I would put my FA code in here, so that the text "Search" appears left aligned in the form field and the font awesome icon gets right aligned in the same form field?

My font awesome code: <i class="fas fa-search"></i>

My p-column code:
<p-column field="LastName"
filter="true"
filterMatchMode="contains"
filterPlaceholder="Search"
header="Last Name"
sortable="custom"
(sortFunction)="handleSort($event)">

Thanks in advance,

Rich

Primaryw
Posts: 26
Joined: 09 Nov 2017, 17:51

01 May 2018, 20:56

Use custom CSS for that column.

Something like: <p-column [style]="{'text-align':'left'}"....

Or you can use bodyStyle / bodyStyleClass in a similar manner.

Then just use CSS to change the location of the icon and the supporting margin/padding.

Right now the CSS uses the :before pseudoclass if I recall correctly.

Assign an additional class to the header or cell you want changed and duplicate the :before style as :after. you'll have to make some adjustments in CSS as I mentioned, but it works.

Also, you may have to use specificity to blank out the :before class... (use specificity so that you don't affect ALL fa-search locations on your site).

Old:
some.styles .specificity.here .fa-search:before { content: '/f0123'; }

New:
some.styles .specificity.here .fa-search:before { content: ' '; }
some.styles .specificity.here .fa-search:after { content: '/f0123'; }

That's just an example, but it's sound.

richleach
Posts: 16
Joined: 21 Jan 2018, 01:59

12 Jul 2018, 17:23

... still not seeing the icon, is this close to what you were referring to?

I created 2 new classes in my compname.component.css file:

.ui-datatable .ui-datatable-tablewrapper .ui-datatable-thead input.ui-inputtext::after{
content:"\1F50D";
}
.magnify{
text-align:right;
}

and assigned magnify to my p-column tag:

<p-column field="LastName"
filter="true"
filterMatchMode="contains"
filterPlaceholder="Search"
header="Last Name"
sortable="custom"
(sortFunction)="handleSort($event)"
styleClass="magnify"
[style]="{'text-align':'left'}">

Thank you for your help with this, very appreciated.

Rich

Primaryw
Posts: 26
Joined: 09 Nov 2017, 17:51

13 Jul 2018, 17:11

The simplest thing to do is to inspect the rendered element and paste the dom code here (Just the code for the single element itself and anything inside the. Then, we can make suggestions.

You have conflicting CSS, I noticed... Your magnify class is align-right but your inline [style] is the opposite. Pick one to use for best results.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 10 guests