29 novembro 2016

Michelly Oliveira

Acrescentar FontAwesome em projeto Angular2

    Nenhum comentário:



O projeto Angular2 foi criado usando CLI, portanto os passos abaixo referem-se aos processos de inserção do FontAwesome em projetos desse tipo.

Passo 1

- No Terminal, digite:
    npm install font-awesome --save

--Isto irá fazer o download dos arquivos do plugin para a pasta node_modules e acrescentar a entrada do mesmo no arquivo package.json

Passo 2

- No arquivo angular-cli.json localize os arrays "styles[]" e "addons[]" e adicione as referências do font-awesome neles, como:

    "apps": [
          {
             "root": "src",
             "outDir": "dist",
             ....
             "styles": [
                "styles.css",
                "../node_modules/bootstrap/dist/css/bootstrap.css",
                "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
             ],
             ...
         }
       ], 
    "addons": [
        "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)" // - here
    ],


Passo 3

- Acrescente os ícones do font-awesome onde necessário em seu código html:

    <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>  

Passo 4

- Inicie ( ou reinicie) o servidor para que as alterações sejam aplicadas.

    ng serve


Próximo
« Anterior
Anterior
Próximo »