Bootstrap 4 - Glifon göçü mü?

317

Glifikonları yoğun olarak kullanan bir projemiz var. Bootstrap v4, glifik yazı tipini tamamen bırakır.

Bootstrap V4 ile gönderilen simgeler için bir eşdeğer var mı?

Değişiklikler

http://v4-alpha.getbootstrap.com/migration/

bootstrap-4  glyphicons 
— Vincent Poirier
kaynak
15
Glifikonları hala kullanabilirsiniz , artık bootstrap ile gönderilmeyeceklerdir. Eğer varsa lisans sorunu, sen kontrol edebilir yazı müthiş simgeler .
— Holt
1
Yazı tipini kullanmak için ödeme yapmanız gerektiğine inanıyorum. Soruyu açıklığa kavuşturmak için düzenledim.
— Vincent Poirier
Glifikonlara bir bağlantı koymak zorunda olduğunuz ücretsiz bir lisans vardır (önceki bağlantımdaki GLYPHICON FREE bölümüne bakın). Önceki yorumumda söylediğim gibi, açık kaynak ve ücretsiz olan harika yazı tipi gibi alternatifler var, ancak hangisinin en iyi olduğunu bilmek açıkça görüşe dayalı olacak ...
— Holt
Bu harika olurdu, ancak ücretsiz paket yazı tipini değil, yalnızca PNG dosyalarını sunar. Görünüşe göre, sadece PRO paketi web yazı tipi olarak Tüm simgeleri içerir . Çok yardımcı olmanıza rağmen (teşekkür ederim), soru daha çok Bootstrap'e dahil edilen bileşenler hakkındadır, eğer herhangi bir türden herhangi bir simgenin v4'e dahil olmadığını (veya olmayacağını) onaylarsanız, bir cevap oluşturabilirsiniz.
— Vincent Poirier
Sağlanan bağlantı fontawesome.io'ya giderseniz, çok fazla beklerseniz 60 $ veya 99 $ ödemeniz istenecektir, bu yüzden inanıyorum ki, fontawesome artık ücretsiz değil.
— Gustavo Rodríguez

Yanıtlar:

269

Her iki kullanabilirsiniz Yazı Müthiş ve Github Octicons Glyphicons için ücretsiz bir alternatif olarak.

Bootstrap 4, Less'ten Sass'a da geçti, böylece projeleriniz için tek bir CSS dosyası oluşturmak için yazı tipinin Sass (SCSS) 'ni oluşturma işleminize entegre edebilirsiniz.

Ayrıca , takımınızı nasıl kuracağınızı öğrenmek için https://getbootstrap.com/docs/4.1/getting-started/build-tools/ adresine bakın :

  1. Bağımlılıklarımızı yönetmek için kullandığımız Düğümü indirip yükleyin.
  2. Kök /bootstrapdizine gidin ve npm installpackage.json içinde listelenen yerel bağımlılıklarımızı yüklemek için çalıştırın .
  3. Ruby'yi yükleyin, Bundler'ı yükleyin gem install bundlerve son olarak çalıştırın bundle install. Bu, Jekyll ve eklentiler gibi tüm Ruby bağımlılıklarını yükleyecektir.

Harika Yazı Tipi

  1. Dosyaları https://github.com/FortAwesome/Font-Awesome/tree/fa-4 adresinden indirin.
  2. Kopyala font-awesome/scss senin / önyükleme klasörünün içine klasör

  3. SCSS'nizi açın /bootstrap/bootstrap.scssve bu dosyanın sonuna aşağıdaki SCSS kodunu yazın:

    $fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";

  4. Yazı tipi dosyasını, font-awesome/fontstarafından dist/fontsveya tarafından ayarlanan başka bir ortak klasöre de kopyalamanız gerektiğine dikkat edin .$fa-font-path bir önceki adımda

  5. Run: npm run distkodunuzu Font-Awesome ile yeniden derlemek için

Github Octicons

  1. Dosyaları şuradan indirin: https://github.com/github/octicons/ adresinden
  2. octiconsKlasörü bilgisayarınıza kopyalayın ./bootstrap klasörüne

  3. SCSS'nizi açın /bootstrap/bootstrap.scssve bu dosyanın sonuna aşağıdaki SCSS kodunu yazın:

    $fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss";

  4. Yazı tipi dosyasını, font-awesome/fontstarafından dist/fontsveya tarafından ayarlanan başka bir ortak klasöre de kopyalamanız gerektiğine dikkat edin .$fa-font-path bir önceki adımda

  5. Run: npm run distKodunuzu Octicons ile yeniden derlemek için

Glyphicons

Bootstrap web sitesinde okuyabilirsiniz:

Glifikon Halflings setinden 250 glifi font formatında içerir. Glificons Halflings normalde ücretsiz olarak mevcut değildir, ancak yaratıcıları onları Bootstrap için ücretsiz olarak kullanılabilir hale getirmiştir. Bir teşekkür olarak, yalnızca mümkün olduğunda Glificons'a bir bağlantı eklemenizi rica ediyoruz.

Anladığım kadarıyla, bu 250 glifi Bootstrap için ücretsiz, ancak sürüm 3 ile sınırlı olmayan ücretsiz olarak kullanabilirsiniz. Böylece onları Bootstrap 4 için de kullanabilirsiniz.

  1. Yazı tipi dosyalarını şu adresten kopyalayın: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
  2. Kopya https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss sizin dosyayı bootstrap/scssklasöre
  3. Scss /bootstrap/bootstrap.scss dosyanızı açın ve bu dosyanın sonuna aşağıdaki SCSS kodunu yazın:
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
  1. Run: npm run distkodunuzu Glificons ile yeniden derlemek için

Bootstrap 4'ün derleme için post CSS Autoprefixer gerektirdiğine dikkat edin . CSS'nizi derlemek için statik bir Sass derleyicisi kullanırken, daha sonra Autoprefixer'ı çalıştırmanız gerekir.

Bootstrap 4 SCSS ile karıştırma hakkında daha fazla bilgiyi burada bulabilirsiniz .

Yukarıdaki yazı tiplerini yüklemek için Bower'ı da kullanabilirsiniz. Bower Font Awesome kullanmak, dosyalarınızı bower_components/components-font-awesome/Github Octicons'ın octicons/octicons/octicons-.scsskullanmanız sırasında ana dosya olarak ayarladığına dikkat ederek yükler octicons/octicons/sprockets-octicons.scss.

Yukarıdakilerin tümü, yalnızca bir HTTP isteği gerektiren tek bir dosyada da dahil olmak üzere tüm CSS kodunuzu derleyecektir. Alternatif olarak, birçok durumda hızlı olabilen CDN'den Font-Awesome yazı tipini de yükleyebilirsiniz. CDN'deki her iki yazı tipi de yazı tipi dosyalarını içerir (data-uri'leri kullanarak, eski tarayıcılar için desteklenmez). Bu nedenle, destekleyecek diğer tarayıcıların yanı sıra hangi çözümün durumunuza en uygun olduğunu düşünün.

Font Awesome için aşağıdaki kodu <head>sitenizin HTML'sinin bölümüne yapıştırın :

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Ayrıca Bootstrap 4'ü Font Awesome veya Github Octicons ile test etmek için bir ön uç Bootstrap 4 Web uygulaması kurmak için Yeoman jeneratörünü deneyin .

— Bass Jobsen
kaynak
4
Bu çok kapsamlıydı ve benim için işleri netleştirmeye ve beni seçtiğim doğru yönde göstermeye gerçekten yardımcı oldu. BS4'ün neden Glyphicon Halflings seti ile gönderilmemeye karar verdiğini bilen var mı? Sadece paketi inceltmek için mi?
— twknab
6
"Ruby'yi Kur" mu ?! Neden yalnızca bir yazı tipi kullanmak için bir geliştirme çerçevesi yükleyeyim ?! Ve nasıl bir yan not olarak bahsediyorsun? Sadece bir yazı tipine ulaşmak için tüm projenizin semantiği, süreçlerini ve bağımlılıklarını değiştirdiği için çok büyük! Bunu nasıl tavsiye edebileceğiniz benim için akıl almaz.
— Jens Mander
261

Glifler'den Font Awesome'e geçmek oldukça kolaydır.

Font Awesome'e bir başvuru ekleyin (yerel olarak veya CDN'yi kullanın).

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Ardından bir arama yapın ve aradığınız ve yerine koyduğunuz glyphicon glyphicon-yerle değiştirin fa fa-. CSS sınıfı adlarının çoğu aynıdır. Bazıları değişti, bu yüzden bunları manuel olarak düzeltmeniz gerekiyor.

— Fred
kaynak
27
Değişiklik olmadan entegrasyon için basit yol. Teşekkürler!
— Cotonea
1
KISS prensibi iş başında!
— Craig
7
Tüm isimler aynı değildir. Bu harita glif ikonu font-awesome için: gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
— Grigory Kislin
1
Bu, kabul edilen cevaptan çok daha basit ve açıktır. Kudos!
— luis.ap.uyen
6
fa fa-amortismana tabi tutulur. Web siteleri şimdi diyor fas fa-ve bu mesaj:The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
— James Wilkins
37

Bootstrap 3'teki glyphicons.less dosyasını GitHub'da bulabilirsiniz. https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less

Şu değişkenlere ihtiyacı vardır:

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";
@icon-font-svg-id:        "glyphicons_halflingsregular";

Daha sonra .less dosyasını doğrudan kullanabileceğiniz bir .css dosyasına dönüştürebilirsiniz. Bunu lesscss.org/less-preview/ adresinde çevrimiçi olarak yapabilirsiniz . Burada sizin için yaptım , glyphicons.css olarak kaydedin ve HTML dosyalarınıza ekleyin.

<link href="https://stackoverflow.com/Content/glyphicons.css" rel="stylesheet" />

Bootstrap 3 paketindeki Glyphicon fontlarına da ihtiyacınız var, bunları / fonts / dizinine yerleştirin.

Artık Gstphicons'u Bootstrap 4 ile her zamanki gibi kullanmaya devam edebilirsiniz.

— Fred
kaynak
Fred Çok teşekkür ederim.
— user3728517
Fred, Teşekkürler. Simgeler Firefox ve Chrome tarayıcılarında görüntüleniyor. Ancak IE'de, Simgeler 11.0.9600.19377 sürümünde görüntüleniyor, ancak 11.0.9600.19356 sürümünde görüntülenmiyor. IE sürüm 11.0.9600.19356'da görüntülenecek simgeleri nasıl yapabilirim. Ayrıca konsolu kontrol ettim ve IE sürümünde hata yok 11.0.9600.19356
— Hemant
@Hemant, bilmiyorum. Her iki durumda da, bu yazı çok eski ve Glyphicons 4. sürümdeyken arkadan. Bugün 5. sürüm için giderdim.
— Fred
17

CSS'de yalnızca glifik sınıflarına ihtiyaç duyuyorsanız: 

@font-face{font-family:'Glyphicons Halflings';src:url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');src:url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
.glyphicon-asterisk:before{content:"\2a";}
.glyphicon-plus:before{content:"\2b";}
.glyphicon-euro:before{content:"\20ac";}
.glyphicon-minus:before{content:"\2212";}
.glyphicon-cloud:before{content:"\2601";}
.glyphicon-envelope:before{content:"\2709";}
.glyphicon-pencil:before{content:"\270f";}
.glyphicon-glass:before{content:"\e001";}
.glyphicon-music:before{content:"\e002";}
.glyphicon-search:before{content:"\e003";}
.glyphicon-heart:before{content:"\e005";}
.glyphicon-star:before{content:"\e006";}
.glyphicon-star-empty:before{content:"\e007";}
.glyphicon-user:before{content:"\e008";}
.glyphicon-film:before{content:"\e009";}
.glyphicon-th-large:before{content:"\e010";}
.glyphicon-th:before{content:"\e011";}
.glyphicon-th-list:before{content:"\e012";}
.glyphicon-ok:before{content:"\e013";}
.glyphicon-remove:before{content:"\e014";}
.glyphicon-zoom-in:before{content:"\e015";}
.glyphicon-zoom-out:before{content:"\e016";}
.glyphicon-off:before{content:"\e017";}
.glyphicon-signal:before{content:"\e018";}
.glyphicon-cog:before{content:"\e019";}
.glyphicon-trash:before{content:"\e020";}
.glyphicon-home:before{content:"\e021";}
.glyphicon-file:before{content:"\e022";}
.glyphicon-time:before{content:"\e023";}
.glyphicon-road:before{content:"\e024";}
.glyphicon-download-alt:before{content:"\e025";}
.glyphicon-download:before{content:"\e026";}
.glyphicon-upload:before{content:"\e027";}
.glyphicon-inbox:before{content:"\e028";}
.glyphicon-play-circle:before{content:"\e029";}
.glyphicon-repeat:before{content:"\e030";}
.glyphicon-refresh:before{content:"\e031";}
.glyphicon-list-alt:before{content:"\e032";}
.glyphicon-flag:before{content:"\e034";}
.glyphicon-headphones:before{content:"\e035";}
.glyphicon-volume-off:before{content:"\e036";}
.glyphicon-volume-down:before{content:"\e037";}
.glyphicon-volume-up:before{content:"\e038";}
.glyphicon-qrcode:before{content:"\e039";}
.glyphicon-barcode:before{content:"\e040";}
.glyphicon-tag:before{content:"\e041";}
.glyphicon-tags:before{content:"\e042";}
.glyphicon-book:before{content:"\e043";}
.glyphicon-print:before{content:"\e045";}
.glyphicon-font:before{content:"\e047";}
.glyphicon-bold:before{content:"\e048";}
.glyphicon-italic:before{content:"\e049";}
.glyphicon-text-height:before{content:"\e050";}
.glyphicon-text-width:before{content:"\e051";}
.glyphicon-align-left:before{content:"\e052";}
.glyphicon-align-center:before{content:"\e053";}
.glyphicon-align-right:before{content:"\e054";}
.glyphicon-align-justify:before{content:"\e055";}
.glyphicon-list:before{content:"\e056";}
.glyphicon-indent-left:before{content:"\e057";}
.glyphicon-indent-right:before{content:"\e058";}
.glyphicon-facetime-video:before{content:"\e059";}
.glyphicon-picture:before{content:"\e060";}
.glyphicon-map-marker:before{content:"\e062";}
.glyphicon-adjust:before{content:"\e063";}
.glyphicon-tint:before{content:"\e064";}
.glyphicon-edit:before{content:"\e065";}
.glyphicon-share:before{content:"\e066";}
.glyphicon-check:before{content:"\e067";}
.glyphicon-move:before{content:"\e068";}
.glyphicon-step-backward:before{content:"\e069";}
.glyphicon-fast-backward:before{content:"\e070";}
.glyphicon-backward:before{content:"\e071";}
.glyphicon-play:before{content:"\e072";}
.glyphicon-pause:before{content:"\e073";}
.glyphicon-stop:before{content:"\e074";}
.glyphicon-forward:before{content:"\e075";}
.glyphicon-fast-forward:before{content:"\e076";}
.glyphicon-step-forward:before{content:"\e077";}
.glyphicon-eject:before{content:"\e078";}
.glyphicon-chevron-left:before{content:"\e079";}
.glyphicon-chevron-right:before{content:"\e080";}
.glyphicon-plus-sign:before{content:"\e081";}
.glyphicon-minus-sign:before{content:"\e082";}
.glyphicon-remove-sign:before{content:"\e083";}
.glyphicon-ok-sign:before{content:"\e084";}
.glyphicon-question-sign:before{content:"\e085";}
.glyphicon-info-sign:before{content:"\e086";}
.glyphicon-screenshot:before{content:"\e087";}
.glyphicon-remove-circle:before{content:"\e088";}
.glyphicon-ok-circle:before{content:"\e089";}
.glyphicon-ban-circle:before{content:"\e090";}
.glyphicon-arrow-left:before{content:"\e091";}
.glyphicon-arrow-right:before{content:"\e092";}
.glyphicon-arrow-up:before{content:"\e093";}
.glyphicon-arrow-down:before{content:"\e094";}
.glyphicon-share-alt:before{content:"\e095";}
.glyphicon-resize-full:before{content:"\e096";}
.glyphicon-resize-small:before{content:"\e097";}
.glyphicon-exclamation-sign:before{content:"\e101";}
.glyphicon-gift:before{content:"\e102";}
.glyphicon-leaf:before{content:"\e103";}
.glyphicon-eye-open:before{content:"\e105";}
.glyphicon-eye-close:before{content:"\e106";}
.glyphicon-warning-sign:before{content:"\e107";}
.glyphicon-plane:before{content:"\e108";}
.glyphicon-random:before{content:"\e110";}
.glyphicon-comment:before{content:"\e111";}
.glyphicon-magnet:before{content:"\e112";}
.glyphicon-chevron-up:before{content:"\e113";}
.glyphicon-chevron-down:before{content:"\e114";}
.glyphicon-retweet:before{content:"\e115";}
.glyphicon-shopping-cart:before{content:"\e116";}
.glyphicon-folder-close:before{content:"\e117";}
.glyphicon-folder-open:before{content:"\e118";}
.glyphicon-resize-vertical:before{content:"\e119";}
.glyphicon-resize-horizontal:before{content:"\e120";}
.glyphicon-hdd:before{content:"\e121";}
.glyphicon-bullhorn:before{content:"\e122";}
.glyphicon-certificate:before{content:"\e124";}
.glyphicon-thumbs-up:before{content:"\e125";}
.glyphicon-thumbs-down:before{content:"\e126";}
.glyphicon-hand-right:before{content:"\e127";}
.glyphicon-hand-left:before{content:"\e128";}
.glyphicon-hand-up:before{content:"\e129";}
.glyphicon-hand-down:before{content:"\e130";}
.glyphicon-circle-arrow-right:before{content:"\e131";}
.glyphicon-circle-arrow-left:before{content:"\e132";}
.glyphicon-circle-arrow-up:before{content:"\e133";}
.glyphicon-circle-arrow-down:before{content:"\e134";}
.glyphicon-globe:before{content:"\e135";}
.glyphicon-tasks:before{content:"\e137";}
.glyphicon-filter:before{content:"\e138";}
.glyphicon-fullscreen:before{content:"\e140";}
.glyphicon-dashboard:before{content:"\e141";}
.glyphicon-heart-empty:before{content:"\e143";}
.glyphicon-link:before{content:"\e144";}
.glyphicon-phone:before{content:"\e145";}
.glyphicon-usd:before{content:"\e148";}
.glyphicon-gbp:before{content:"\e149";}
.glyphicon-sort:before{content:"\e150";}
.glyphicon-sort-by-alphabet:before{content:"\e151";}
.glyphicon-sort-by-alphabet-alt:before{content:"\e152";}
.glyphicon-sort-by-order:before{content:"\e153";}
.glyphicon-sort-by-order-alt:before{content:"\e154";}
.glyphicon-sort-by-attributes:before{content:"\e155";}
.glyphicon-sort-by-attributes-alt:before{content:"\e156";}
.glyphicon-unchecked:before{content:"\e157";}
.glyphicon-expand:before{content:"\e158";}
.glyphicon-collapse-down:before{content:"\e159";}
.glyphicon-collapse-up:before{content:"\e160";}
.glyphicon-log-in:before{content:"\e161";}
.glyphicon-flash:before{content:"\e162";}
.glyphicon-log-out:before{content:"\e163";}
.glyphicon-new-window:before{content:"\e164";}
.glyphicon-record:before{content:"\e165";}
.glyphicon-save:before{content:"\e166";}
.glyphicon-open:before{content:"\e167";}
.glyphicon-saved:before{content:"\e168";}
.glyphicon-import:before{content:"\e169";}
.glyphicon-export:before{content:"\e170";}
.glyphicon-send:before{content:"\e171";}
.glyphicon-floppy-disk:before{content:"\e172";}
.glyphicon-floppy-saved:before{content:"\e173";}
.glyphicon-floppy-remove:before{content:"\e174";}
.glyphicon-floppy-save:before{content:"\e175";}
.glyphicon-floppy-open:before{content:"\e176";}
.glyphicon-credit-card:before{content:"\e177";}
.glyphicon-transfer:before{content:"\e178";}
.glyphicon-cutlery:before{content:"\e179";}
.glyphicon-header:before{content:"\e180";}
.glyphicon-compressed:before{content:"\e181";}
.glyphicon-earphone:before{content:"\e182";}
.glyphicon-phone-alt:before{content:"\e183";}
.glyphicon-tower:before{content:"\e184";}
.glyphicon-stats:before{content:"\e185";}
.glyphicon-sd-video:before{content:"\e186";}
.glyphicon-hd-video:before{content:"\e187";}
.glyphicon-subtitles:before{content:"\e188";}
.glyphicon-sound-stereo:before{content:"\e189";}
.glyphicon-sound-dolby:before{content:"\e190";}
.glyphicon-sound-5-1:before{content:"\e191";}
.glyphicon-sound-6-1:before{content:"\e192";}
.glyphicon-sound-7-1:before{content:"\e193";}
.glyphicon-copyright-mark:before{content:"\e194";}
.glyphicon-registration-mark:before{content:"\e195";}
.glyphicon-cloud-download:before{content:"\e197";}
.glyphicon-cloud-upload:before{content:"\e198";}
.glyphicon-tree-conifer:before{content:"\e199";}
.glyphicon-tree-deciduous:before{content:"\e200";}
.glyphicon-briefcase:before{content:"\1f4bc";}
.glyphicon-calendar:before{content:"\1f4c5";}
.glyphicon-pushpin:before{content:"\1f4cc";}
.glyphicon-paperclip:before{content:"\1f4ce";}
.glyphicon-camera:before{content:"\1f4f7";}
.glyphicon-lock:before{content:"\1f512";}
.glyphicon-bell:before{content:"\1f514";}
.glyphicon-bookmark:before{content:"\1f516";}
.glyphicon-fire:before{content:"\1f525";}
.glyphicon-wrench:before{content:"\1f527";}
Snippet'i genişlet

— Роман Будённый
kaynak
Benim için bir tedavi gibi çalıştı! Teşekkürler!
— theshadow124
3

Tek katmanlı çözümler arayanlar için yalnızca Bootstrap Glificons'larını içe aktarabilirsiniz:

<link href="https://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
— R. Gurung
kaynak
Diğer bir sürü şey Tatili
— Bob CLAERHOUT
Daha fazlasını bilmek isterim. @BobClaerhout
— R. Gurung
Hatırladığım 2 şey: yazı tipi değişikliği ve bootstrap datepicker ( bootstrap-datepicker.readthedocs.io/en/latest ) güzel biçimini
— kaybediyor
2

Genel bakış:

Glifikons olmadan bootstrap 4 kullanıyorum. Glifikonlara bağlı bootstrap treeview ile ilgili bir sorun buldum. Treeview olduğu gibi kullanıyorum ve simge sınıf stilleri yazı tipi harika sınıf stilleri çevirmek için scss @extend kullanıyorum. Sanırım bu oldukça kaygan (bana sorarsan)!

Detaylar:

Benim için işlemek için scss @extend kullandım.

Daha önce font-awesome'u geçmişte kullandığımdan daha iyi bir sebep olmadan kullanmaya karar verdim.

Bootstrap treeview denemeye gittiğimde, simgelerin eksik olduğunu gördüm, çünkü yüklü glifonları yoktu.

Glyphicon sınıflarının font-awesome sınıflarını bu şekilde kullanmasını sağlamak için scss @extend özelliğini kullanmaya karar verdim:

.treeview {
  .glyphicon {
    @extend .fa;
  }
  .glyphicon-minus {
    @extend .fa-minus;
  }
  .glyphicon-plus {
    @extend .fa-plus;
  }
}
— Taylored Web Siteleri
kaynak
2

Laravel 5.6 kullanıyorsanız, Bootstrap 4 ile birlikte gelir. Tek yapmanız gereken:

npm install and npm install open-iconic --save

At /resources/assets/sass/app.scssdeğişim çizgisi hakkında 2. hatta ithalat için yazı tipi

@import '~open-iconic/font/css/open-iconic-bootstrap';

Şimdi tek yapman gereken

npm run watch

ve dahil et 

<link rel="stylesheet" href="{{asset('css/app.css')}}">

ana blade dosyasının üstüne ve <script src="{{asset('js/app.js')}}"></script> gövde etiketini kapatmadan önce. Bootstrap 4 ve ikonu alacaksınız.

Kullanımı <span class="oi oi-cog"></span>

Simge ayrıntıları için buraya bakın: Açık İkonik: Bootstrap 4 tarafından önerilir

Laravel dışında başka bir projedeyseniz, @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css'; stil dosyanızda .

Bu yardımcı olur umarım. Mutlu denemeler.

— Ershad Ahamed
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.