web-dev-qa-db-fra.com

les glyphiques ne s'affichent pas avec l'intégration sass bootstrap

J'ai utilisé ce tutoriel pour intégrer bootstrap dans mon projet:

https://laravel-news.com/2015/10/setup-bootstrap-sass-with-laravel-elixir/

Cela place un fichier app.css dans le dossier css . Cependant, si j'essaie d'utiliser des glyphicons, ils ne s'affichent pas . J'ai donc essayé de modifier le fichier elixir comme suit:

    elixir(function(mix) {

    mix.sass('app.scss')
        .browserify('app.js')
        .copy('node_modules/bootstrap-sass/assets/fonts', 'public/css/fonts')   

});

Le dossier des polices est copié sous public/css/fonts mais aucune icône ne s'affiche. Qu'est-ce que j'oublie ici? Un indice?

dans mon app.css le chemin semble correct, par exemple:

src: url("fonts/bootstrap/glyphicons-halflings-regular.eot");
twitter-bootstraplaravelfontssasslaravel-elixir
14
Chriz74

J'ai eu le même problème avec la nouvelle installation de Laravel 5.2. Ce que j’ai fait, c’est juste inspecté le chemin de requête dans le navigateur qui était: 

../build/fonts/bootstrap/glyphicons-halflings-regular.woff2

donc je viens d'ajouter à gulp.js ceci:

mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/','public/build/fonts/bootstrap');

et ensuite dans le terminal: 

gulp

Cela a fait le tour pour moi! 

24
halfred

Vous devriez dans votre app.scss avant y compris le fichier bootstrap définir la variable $icon-font-path correctement, probablement dans votre cas, il devrait être:

$icon-font-path: '/css/fonts/';
8
Marcin Nabiałek

C'est ce qui a fonctionné pour moi dans Laravel 5.3 sous Windows

  1. Assurez-vous d'abord que vous utilisez la dernière version du paquet NodeJS (v6.7.0).

    Cliquez sur l'onglet "Dernières fonctionnalités actuelles" à l'adresse URL https://nodejs.org/en/download/current/

  2. Exécuter npm install

  3. Modifiez le fichier gulpfile.js pour contenir les éléments suivants:

    elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js');
    mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/','public/fonts/bootstrap');
});

  4. Run avale:

    gulp

  5. C'est tout.

7
Basil Musa

Dans Laravel 5.4, installez simplement les dépendances npm et exécutez npm en production ou en développement selon vos besoins.

npm install
npm run production

Laravel fera le reste.

4
Jithin

Dans Laravel 5.4, ce que j'ai fait est

mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/', 'public/fonts/bootstrap');

Et dans resources/assets/sass/_variables.scss ou app.scss

$icon-font-path: '/fonts/bootstrap/';
3
Kzy

Laravel 5.3 enlever la construction

mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/', 'public/fonts/bootstrap');

courir à avaler

1
cmac

J'ai eu le même problème avec Laravel 5.4. Il s’avère que je n’ai pas exécuté npm install et npm run dev.

Une fois que ces deux commandes ont été exécutées, les polices (et les glyphicons) ont été copiés correctement dans le répertoire/public. Il n'était pas nécessaire de modifier les fichiers Sass ou Build.

1
Votemike

Dans le fichier webpack.config.js:

publicPath: '../'

Au lieu de Mix.resourceRoot

0
Kashif Saleem

Si vous utilisez elixir () helper dans vos modèles de lame, vous devez placer vos fichiers de polices dans/public/build. En tant que résultat/public/build/fonts, le dossier "fonts" contient tous les fichiers de polices.

0
cajuc
  • Rechercher dans les outils de développement de votre navigateur regarder le chemin. 
  • Dans le mien, il était public/fonts/glyphicons-halflings-regular.ttf. J'ai téléchargé ces polices manuellement.
  • Et ça a marché!
0
Dev