javascript - usage - fontawesome cdn icon - Code Examples
javascript - usage - fontawesome cdn icon
Como posso adicionar Font Awesome ao meu projeto Aurelia usando npm? (6)
Eu tenho acompanhado o tutorial do Contact Manager e gostaria de adicionar o Font Awesome ao projeto. Aqui está o que eu fiz até agora:
Adicionamos o seguinte ao aurelia.json no array de dependências do vendor-bundle.js :
"path": "../node_modules/font-awesome",
Mas quando rodando au run --watch eu recebo o erro:
erro C: \ Users \ node_modules \ font-awesome.js
Por que está procurando o arquivo .js ?
Método de configurações padrão simples
Aqui estão os 4 passos simples que eu uso para trazer Font-Awesome para um projeto Aurelia que usa o CLI.
1) npm instalar font-awesome --save
2) adicione copyFiles para construir de aurelia.json
"node_modules/font-awesome/fonts/*": "/fonts/"
3) adicionar o pacote à matriz de dependências de aurelia.json
"path": "../node_modules/font-awesome/css",
"main": "font-awesome.css"
4) inclua a importação para o arquivo css (meu vive no app.html)
<require from="font-awesome.css"></require>
Especificando um local de fonte personalizado
Como eu estava servindo meus arquivos de um local diferente, eu precisava ser capaz de tweek a localização da fonte configurada. Como tal, abaixo estão os passos envolvidos se você precisar fazer o mesmo e especificar onde as fontes estão armazenadas. Eu estou usando .less
1, 2) Como acima.
3) Em vez de adicionar ao pacote, você precisa referenciar o arquivo font-awesome less dentro do seu próprio arquivo (o meu é chamado de site.less) e então definir o @fa-font-path do @fa-font-path para o seu local personalizado.
@import "../node_modules/font-awesome/less/font-awesome.less";
@fa-font-path:   "fonts";
4) Não há 4, com este método, desde que você tenha o seu próprio arquivo site.css equivalente já mencionado (com a importação) você não precisa adicionar mais nada.
Acredito que a seção bundles.dependencies é para referenciar bibliotecas JS.
No seu caso, um pouco de trabalho adicional será necessário. De acordo com os documentos da Aurelia CLI , você também pode criar seus próprios geradores, o que é útil para nós.
Adicione alguns novos caminhos para aurelia.json :
"fa": "node_modules\\font-awesome",
"faCssOutput": "src",
"faFontsOutput": "fonts"
Crie uma tarefa para o pacote CSS ... au generate task fa-css
Arquivo de tarefa modificado: aurelia_project\tasks\fa-css.js|ts
export default function faCss() {
return gulp.src(`${project.paths.fa}\\css\\*.min.css`)
/* this ensures that our 'require-from' path
will be simply './font-awesome.min.css' */
.pipe(gulp.dest(project.paths.faCssOutput))
.pipe(gulp.src(`${project.paths.faCssOutput}\\font-awesome.min.css`))
... e outra para copiar arquivos de fonte: au generate task fa-fonts
Arquivo de tarefa modificado: aurelia_project\tasks\fa-fonts.js|ts
export default function faFonts() {
return gulp.src(`${project.paths.fa}\\fonts\\*`)
.pipe(gulp.dest(project.paths.faFontsOutput));
Adicione estas novas tarefas acima ao processo de construção em aurelia_project\tasks\build.js|ts :
faCss,
faFonts
Depois de executar estas etapas, o au build deve incorporar font-awesome.min.css em scripts / app-bundle.js e copiar os arquivos de fontes necessários para a pasta ./fonts.
A última coisa a fazer é exigir font-awesome dentro do nosso html.
<require from ="./font-awesome.min.css"></require>
Não adicione recursos de fontes incríveis ao aurelia.json - você precisaria de arquivos de fontes também, que o Aurelia não processa. Em vez disso, siga os seguintes passos.
Primeiro, se você adicionou alguma coisa para o font-awesome no seu arquivo aurelia.json , remova-o novamente.
Adicione o novo arquivo prepare-font-awesome.js na pasta \aurelia_project\tasks e insira o código abaixo. Ele copia arquivos de recursos com fonte impressionante para a pasta de saída (como configurado arquivo de configuração aurelia.json ; por exemplo, scripts ):
import changedInPlace from 'gulp-changed-in-place';
export default function prepareFontAwesome() {
const source = 'node_modules/font-awesome';
const taskCss = gulp.src(`${source}/css/font-awesome.min.css`)
.pipe(gulp.dest(`${project.platform.output}/css`));
const taskFonts = gulp.src(`${source}/fonts/*`)
.pipe(gulp.dest(`${project.platform.output}/fonts`));
Abra o arquivo build.js na pasta \aurelia_project\tasks e insira as duas linhas seguintes; isso importará a nova função e a executará:
import prepareFontAwesome from './prepare-font-awesome'; // Our custom task
prepareFontAwesome // Our custom task
Finalmente, na seção <head> do seu arquivo index.html , basta adicionar a seguinte linha:
<link rel="stylesheet" href="scripts/css/font-awesome.min.css">
Isso é tudo; Agora você pode usar ícones impressionantes de fontes em qualquer módulo de visão Aurelia (arquivos html).
Observe que isso funciona para qualquer biblioteca de terceiros complexa que requer recursos que você deve incluir manualmente.
Na verdade, não respondendo à sua pergunta sobre como integrar o Font Awesome em seu aplicativo usando o NPM , mas há uma maneira alternativa e limpa de obtê-lo em seu aplicativo: usando o CDN.
Como mencionado em outras respostas, Aurlia atualmente não suporta pacotes de recursos diferentes de js, css e html prontos para uso usando o CLI. Há muita discussão sobre esse assunto, e existem várias soluções alternativas, principalmente hacky, como algumas sugeridas aqui.
Rob Eisenberg diz que está planejando integrá-lo corretamente no Aurelia CLI, mas considera isso uma prioridade baixa, porque há uma solução simples. Para citá-lo:
Claro que há interesse em abordar isso. No entanto, é menor prioridade do que outras coisas na lista para o CLI, em parte porque uma simples tag de link irá corrigir o problema e é muito mais fácil do que o trabalho que teríamos que fazer para resolver isso dentro da CLI.
Fonte: https://github.com/aurelia/cli/issues/248#issuecomment-254254995
Obtenha seu link CDN exclusivo enviado aqui: http://fontawesome.io/get-started/
Inclua este link na cabeça do seu arquivo html de índice
Não se esqueça de remover tudo o que você já tenha adicionado para tentar fazê-lo funcionar: o pacote npm (e sua referência em seu pacote.json), a referência em seu arquivo aurelia.json, qualquer tarefa customizada que você possa ter criado, qualquer tag <require> , ...
Você não precisa mais disso:
em aurelia.json
"path": "../node_modules/bootstrap/dist/",
"font-awesome.min.css"
Veja a seção Configuração para copiar arquivos
importando css / fonts automagicly agora é suportado.
Finalize este "problema" https://github.com/aurelia/cli/issues/249
Eu percebi / li os comentários isso não copia os arquivos de fonte. Aqui está um script de compilação atualizado (es6) que copiará todos os recursos e adicionará a pasta ao git ignore. Se você quiser a versão transcrita, verifique aqui
https://github.com/aurelia/cli/issues/248#issuecomment-253837412
./aurelia_project/tasks/build.js
copyAdditionalResources,
function copyAdditionalResources(done){
readGitIgnore();
function readGitIgnore() {
let lineReader = readline.createInterface({
input: fs.createReadStream('./.gitignore')
let gitignore = [];
gitignore.push(line);
lineReader.on('close', (err) => {
copyFiles(gitignore);
function copyFiles(gitignore) {
let stream,
bundle = project.build.bundles.find(function (bundle) {
return bundle.name === "vendor-bundle.js";
// iterate over all dependencies specified in aurelia.json
for (let i = 0; i < bundle.dependencies.length; i++) {
let dependency = bundle.dependencies[i];
let collectedResources = [];
if (dependency.path && dependency.resources) {
// run over resources array of each dependency
for (let n = 0; n < dependency.resources.length; n++) {
let resource = dependency.resources[n];
let ext = resource.substr(resource.lastIndexOf('.') + 1);
// only copy resources that are not managed by aurelia-cli
if (ext !== 'js' && ext != 'css' && ext != 'html' && ext !== 'less' && ext != 'scss') {
collectedResources.push(resource);
dependency.resources.splice(n, 1);
if (collectedResources.length) {
if (gitignore.indexOf(dependency.name)< 0) {
console.log('Adding line to .gitignore:', dependency.name);
fs.appendFile('./.gitignore', os.EOL + dependency.name, (err) => { if (err) { console.log(err) } });
for (let m = 0; m < collectedResources.length; m++) {
let currentResource = collectedResources[m];
if (currentResource.charAt(0) != '/') {
currentResource = '/' + currentResource;
let path = dependency.path.replace("../", "./");
let sourceFile = path + currentResource;
let destPath = './' + dependency.name + currentResource.slice(0, currentResource.lastIndexOf('/'));
console.log('Copying resource', sourceFile, 'to', destPath);
use usage the shortcode latest icon how fontawesome font fas awesome javascript font-awesome aurelia aurelia-framework