Font Awesome icons do not take Primeng

Asked

Viewed 864 times

1

I have the lib of Font Awesome installed and configured in my project, and I have the lib of Primeng also installed, but the icones of Font Awesome is not getting the Primeng Datatable, is something missing in my HTML file or is it the project that is not well configured.

This is my page;

  <div class="ui-g">
            <div class="ui-g-12 ui-md-6">
            <p-dataTable [value]="lancamentos">
                <p-column field="pessoa" header="Nome" styleClass="col-data"></p-column>
                <p-column field="descricao" header="Descrição" styleClass="col-data"></p-column>
                <p-column field="dataVencimento" header="Valor" styleClass="col-data"></p-column>
                <p-column styleClass="col-acoes">
                        <ng-template pTemplate="body">
                          <a pButton icon="fa-pencil"></a>
                          <button pButton icon="fa-trash"></button>
                        </ng-template>
                    </p-column>
            </p-dataTable>

            </div>

This is my package.json file

"font-awesome": "4.7.0",

This is my angular file-cli.json

"styles": [
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/admin-lte/bootstrap/css/bootstrap.min.css",
    "../node_modules/admin-lte/dist/css/AdminLTE.min.css",
    "../node_modules/admin-lte/dist/css/skins/skin-red.min.css",
    "../node_modules/admin-lte/plugins/iCheck/flat/red.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css",
    "styles.css"
  ],

It’s showing up like this;

inserir a descrição da imagem aqui

angular font-awesome

3 answers

1


In the icon property put this way.

icon="fa fa-pencil"

That should solve.

  • that’s right, thank you very much.

  • I’m glad you decided. Dispose.

  • Actually not only that, the fa YET is working, but will stop working soon seems. With the new version of Fontawesome you need to copy the tag doc site, because the fa of the images Solid on the tag class turned fas

0

Depending on the version of your Primeng, if it is 6 no longer supports Fontawesome, you have to use the Primeng’s own library ex: "pi pi-save"

0

If you install by NPM, I believe the correct import is like this:

"styles": [
"../node_modules/font-awesome/css/font-awesome.css" ],

  • Didn’t take it, I tested it, and I realized the only difference would be the min, but it didn’t take.

  • Go to the Node modules folder and see if there is such a file, Tbm always restarts the server when you change the angular-cli.json.

  • I’ve done it too.

Browser other questions tagged angular font-awesome

You are not signed in. Login or sign up in order to post.