glyphicons nicht mit sass bootstrap integration

Habe ich dieses tutorial zu integrieren bootstrap in meinem Projekt:

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

Diese Orte eine app.css-Datei im css-Ordner.
Aber wenn ich versuche zu verwenden glyphicons Sie nicht zeigen, bis.
So habe ich versucht, ändern Sie die elixir-Datei wie folgt:

    elixir(function(mix) {

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

});

Den fonts-Ordner kopiert wird, unter public/css/fonts, aber noch kein Symbol zeigt. Was vermisse ich hier? Keine Ahnung?

in meiner app.css der Pfad scheint korrekt zu sein, zum Beispiel:

src: url("fonts/bootstrap/glyphicons-halflings-regular.eot");
Gibt es irgendwelche Fehler angezeigt, beim aufrufen der <code>schlucken</code> Befehl in dem terminal?

InformationsquelleAutor Chriz74 | 2016-01-14

  1. 23

    Ich hatte das gleiche problem mit einer frischen Installation von laravel 5.2.
    Was habe ich gerade überprüft den request-Pfad im browser war : 

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

    also habe ich nur Hinzugefügt gulp.js diese :

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

    und danach im terminal : 

    gulp

    Dass hat den trick für mich!

    danke @halfred dieser arbeitete für mich
    arbeitete für mich durch entfernen build vom Ziel Weg
    Hat bei mir nicht funktioniert. Mit Laravel 5.3 und geändert gulpfile.js
    Laravel 5.3 entfernen Sie bauen dir
    Mischung.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/", "öffentlich/fonts/bootstrap'); @BasilMusa

    InformationsquelleAutor halfred

  2. 8

    Sollten Sie in Ihrem app.scss vor einschließlich bootstrap-Datei, setzen Sie die variable $icon-font-path Wert richtig wohl in Ihrem Fall soll es sein:

    $icon-font-path: '/css/fonts/';
    versucht, immer noch nichts
    Also, wo Ihr schriftart, die tatsächlich In public/css/fonts oder in public/css/fonts/bootstrap? Wenn in der zweiten versuchen Sie, wenn mit gültigen Pfad.
    Zweite, bootstrap
    So versuchen Sie mit $icon-font-path: '/css/fonts/bootstrap/'; at the same beginning of your app.scss " - Datei
    funktioniert auch nicht

    InformationsquelleAutor Marcin Nabiałek

  3. 7

    Dies ist was für mich gearbeitet in Laravel 5.3 auf Windows

    1. Stellen Sie zunächst sicher, dass Sie die NodeJS-package-neueste version (v6.7.0)

      Klicken Sie auf die Registerkarte "Aktuellen Neuesten Features" unter der URL https://nodejs.org/en/download/current/

    2. Laufen npm install

    3. Ändern Sie die Datei gulpfile.js Folgendes enthalten:

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

    4. Laufen gulp:

      gulp

    5. Thats it.

    InformationsquelleAutor Basil Musa

  4. 4

    In Laravel 5.4, einfach installieren npm-Abhängigkeiten und führen Sie npm in der Produktion oder dev, wie gebraucht.

    npm install
npm run production

    Laravel wird den rest erledigen.

    InformationsquelleAutor Jithin

  5. 3

    In Laravel 5.4 was ich getan habe ist

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

    Und in resources/assets/sass/_variables.scss oder app.scss

    $icon-font-path: '/fonts/bootstrap/';
    Ich benutze Laravel 5.4, icons funktioniert nicht. Ich habe meine app.css - Datei und sah, dass die Schrift Weg ist /fonts/. Wenn ich manuell Bearbeiten, diesen Weg zu ../fonts statt /fonts es funktioniert. Ich kann nicht herausfinden, wie man diesen Weg. Ich kann es nicht ändern $icon-font-path' to ../fonts`, es gibt mir eine Fehlermeldung.
    Hi! Stellen Sie sicher, dass Ihre font-Ordner ist in public - Verzeichnis und ändern Sie Ihren Pfad, es sollte so gehen. $icon-font-path: '/fonts/'; Hinweis: Sie haben, um es zu Bearbeiten auf resources/assets/sass/
    Es war in der öffentlichkeit. Ich behoben. Ich änderte publicPath 'webconfig.mix.js' - Datei. Set publicPath Schriften '../'
    In eine saubere Installation von Laravel 5.4 Sie haben einfach zu tun npm install und npm run dev; die Standard-Laravel setup ist schon richtig.

    InformationsquelleAutor Kzy

  6. 1

    Laravel 5.3 entfernen Sie bauen

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

    laufen Schluck

    InformationsquelleAutor cmac

  7. 1

    Ich hatte das gleiche problem mit Laravel 5.4 Es stellt sich heraus, dass ich noch nicht laufen npm install und npm run dev.

    Einmal diese beiden Befehle ausgeführt wurden, die Schriften (und glyphicons) richtig kopiert wurden in das /public Verzeichnis. Es war nicht nötig, Bearbeiten Sie sass oder build-Dateien.

    InformationsquelleAutor Votemike

  8. 1

    Für Laravel 5.4

    Diese Antwort nicht genau mein problem gelöst, aber es wies mich in die richtige Richtung. Dies ist meine Lösung, und es deckt beide, wenn Sie definiert haben, die url für Ihre Anwendung (über homestead oder eine andere VM/Vagrant/etc. oder wenn Sie über set vhost und hosts-Datei für Ihre Anwendung), oder wenn Sie wie ich sind, und installiert haben, lamp-stack/xampp/xampp/mapm/etc und der Entwicklung von apache-htdocs sbfolder.

    Erstens müssen Sie

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

    in Ihrem webpack.mix.js am Ende der Datei.

    Nächsten öffnen resources/assets/sass/_variable.scss und Bearbeiten $icon-font-path Wert.

    Wenn Sie nicht mit dem homestead-aber manche lamp-stack, wo Sie nicht definiert haben, die dev-url für Ihre Anwendung (Sie hat nicht gesetzt vhost und verändert hosts-Datei), sondern Sie greifen auf es als Unterordner z.B. localhost/YOUR_APP/public/ dann sollten Sie das Setup-Symbol-font-Pfad wie

    $icon-font-path: "/YOUR_APP/public/fonts/";

    Wenn Sie die url für Ihre Anwendung, die Sie gerade brauchen, um set-Symbol-font-paht wie

    $icon-font-path: "/public/fonts/" und kompilieren Sie die css-Datei. Sollten Sie ändern, bevor Sie Ihre Anwendung auf die Produktion, wenn es nicht zunächst!!!

    Für diejenigen, die nicht wissen, wie zu kompilieren, css-und js-Dateien befolgen Sie diese Schritte:

    1. Gehen Sie zum Stammordner Ihrer Anwendung, und führen Sie die bash (git bash, cmd, etc.)

    2. npm install

    3. npm run-script production (Sie haben andere Optionen zur Verfügung, aber ich bevorzuge die Produktion, da es minimiert js und css)

    4. Herzlichen Glückwunsch, Sie nur neu kompiliert Ihre js und css -

    InformationsquelleAutor Bosko Stupar

  9. 0

    Wenn Sie mit Elixier () - Helfer in Ihrer blade-templates, dann sollten Sie Ihre Schriftarten-Dateien in /public/build. Als Ergebnis /public/build/Schriften, den "fonts" - Ordner enthält alle font-Dateien.

    InformationsquelleAutor cajuc

  10. 0
    • Blick in die developer-tools Ihres Browsers sehen Sie den Pfad.
    • In mir, es war public/fonts/glyphicons-Halblinge-regelmäßig.ttf-ich heruntergeladen habe die Schriftarten manuell platzierte Sie dort.
    • Und es funktionierte!

    InformationsquelleAutor Dev

  11. 0

    In webpack.config.js set:

    publicPath: '../'

    Statt
    Mischung.resourceRoot

    InformationsquelleAutor Kashif Saleem

  12. -1

    Probieren Sie etwas wie:

    var gulp = require('gulp');

gulp.task('fonts', function() {
   gulp.src('.node_modules/bootstrap-sass/assets/fonts/bootstrap/fonts/*.{ttf,woff,eof,svg,woff2}')
   .pipe(gulp.dest('public/css/fonts'));
});

    und fügen Sie

    mix
//other scripts
.task('fonts')
    danke, aber es war bereits funktioniert, Fehler war hier: ich habe versucht mit <span class="glyphicons glyphicons-ok"></span> statt <span class="glyphicon glyphicon-ok"></span>

    InformationsquelleAutor Deciple

  13. -1

    Aktualisierte Antwort, ich habe diese jetzt umgesetzt in ein viel besserer Weg, ähnlich wie die top-Antwort. Im app.scss:

    /* BOOTSTRAP */
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

/* FONT-AWESOME */
$fa-font-path: "../../fonts";
@import "node_modules/font-awesome/scss/font-awesome";
    kein Fehler ist showin in der Konsole
    warum bauen/fonts ?
    da meine CSS-Datei ist in build wenn ich mischen Sie es mit Elixier. Also, wenn das Datei-Referenzen-Schriften, Sie sind im Vergleich zu den build Ordner, nicht die public Ordner.
    aktualisiert meine Antwort mit einer neuen Methode

    InformationsquelleAutor Jeff

Schreibe einen Kommentar