tek bir html

Question

içine font-müthiş simgelerin gömülmesi Aynı sayfada bulunan tüm js ve htmls ile tek bir sayfa html uygulaması oluşturmam gerekiyor. Tek bir html'de font harika kütüphane ve ikonlar ekleyebileceğim ve kullanabileceğim bir yol var mı? Sayfam açısal tabanlı. Belki base64 kodlaması veya fa simgelerin SVG biçimini kullanarak bir şeye dönüştürmek gerekir

<div><i class="fa fa-{{data.icon}} fa-{{styling.iconSize}}" style="color:  {{styling.iconColor}}"></i></div> 

: Ben gibi fa simgelerle HTMLs elde edilecektir.

Answer 1

Elbette. "Getting Started" -Page, CSS'yi dahil etmek için çeşitli olasılıkları listeler. Ve sadece birkaç simgeye ve yanan performansa ihtiyacınız varsa, sayfanızdaki simgelerin bir alt kümesini (bir ücret karşılığında) eklemenizi sağlayan FortAwesome projesine bakmak isteyebilirsiniz.

Answer 2

http://fontello.com/'a bir göz atın, açıklamakta olduğunuz şeyleri yapmanın en kolay yoludur ve tek dosyanızı şişirmeyin.

Sadece kullandığınız simgeleri seçebilir ve özel bir zip dosyası indirebilirsiniz.

Zip içinde, adında "gömülü" olan bir css dosyası bulacaksınız (en azından, bu yazıdan itibaren, bunu dahil ederler). Bu dosyanın içeriğini etiketler arasında tek dosya HTML sayfanıza kopyalayıp yapıştırabilirsiniz.

Aksi takdirde, evet, base64 font dosyalarını kodlar ve bunları url() tanımının içindeki font URL'lerinin yerine yerleştirir. (örn: url ('veriler: uygulama/sekizli-stream; base64, _THE_BASE64_HERE_')

Burada geçmişte kullandığınız base64 dönüştürücü bir online dosyasıdır: https://jpillora.com/base64-encoder/

Ama eğer gerçekten Bu tek sayfalık bir web sitesi fikrine, o zaman gulp (veya benzer yapı araçlarından herhangi biri) ile rahat almanızı öneririm ve https://www.npmjs.com/package/gulp-base64 gibi bir şey kullanarak css dosyanızın otomatik olarak işlenmesini ve base64 kodlu inline veri ile başvurulan herhangi bir dosyayı değiştirmesini öneririm. işleri ayrı tutmanıza ve ardından tek bir dosya oluşturmanıza izin verir.