Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    File woff: icone e simboli

    Ho scaricato un file (.woff) che utilizzo in una parte di codice CSS, questo definisce una serie di icone e simboli che utilizzo in questo modo
    codice HTML:
    <style>
       .icon-fork:before { content:"\f14d"; }
    </style>
    
    <i class="icon-fork"></i> Fork
    Va bene non ci sono problemi, solo che non riesco a comprendere come bisogna fare per stabilire le accoppiate della stringa esadecimale (nel caso sopra scritto \f14d) con la rispettiva icona generata.

    Devo fare un file dinamico per generare un certo numero di righe per vedere prima a quale immagine corrisponde?
    Magari c'è un sistema più efficace?

  2. #2
    Ma un .woff non è un tipo di font?
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2009
    Messaggi
    38
    Hai presente cos'è la tabella ASCII?

    Quello che cerchi è concettualmente qualcosa di analogo. Si chiama tabella UTF-8.

    Problema: lì non ci sono 128 simboli, ma molti molti molti molti di più, e quindi non è così semplice da navigare...

    http://dev.networkerror.org/utf8/

    Nel tuo caso è il numero 61773. Prova quindi a impostare 61000 e 62000 come limiti inferiore e superiore, tanto per iniziare ad avere un'idea delle dimensioni della tabella intera.

    Per "fortuna" i simboli sono raccolti in gruppi omogenei. Il tuo ricade in quello chiamato "Private Use Area", che come puoi vedere già da solo è grandino grandino:

    http://www.utf8-chartable.de/unicode-utf8-table.pl

    In effetti non capisco cosa c'entri in tutto questo il font .woff.

    Ciao!

  4. #4
    Grazie per le risposte,

    per rispondere a Carlo, si i file sono per i font. In pratica su molti siti puoi scaricare una infinità di font, compresi quelli che vengono classificati come simbolici, si possono ad esempio scegliere icone di varie categorie come Loghi Social Media, Marchi Automobilistici, Loghi multinazionali, Icone Chat, etc. Mi sono imbattuto in 3 file (esattamente) che ho inserito nel codice HTML così come indicato di seguito

    codice HTML:
    <html>
    <style>
    @font-face {
       font-family:'web-iconfont';   src:url(sym_font2.eot?);
       src:url(sym_font2.eot?#iefix)
       format("embedded-opentype"), url(sym_font2.woff?)
       format("woff"), url(sym_font2.ttf?)ù
       format("truetype");
       font-weight:normal; font-style:normal;
    }
    .web-icon:before,[class$="web-icon"]:before,[class*="web-icon "]:before,[class^="web-icon"]:before {
       font-family:'web-iconfont'; speak:none; font-style:normal; font-weight:normal;
       font-size:24pt; text-transform:none;line-height:1; -webkit-font-smoothing:antialiased;
       -moz-osx-font-smoothing:grayscale;
    }
    .web-icon-p1:before { content:"\f111"; }
    .web-icon-p2:before { content:"\f112"; }
    .web-icon-p3:before { content:"\f113"; }
    .web-icon-p4:before { content:"\f114"; }
    .web-icon-p5:before { content:"\f115"; }
    .web-icon-p6:before { content:"\f116"; }
    .web-icon-p7:before { content:"\f117"; }
    .web-icon-p8:before { content:"\f118"; }
    .web-icon-p9:before { content:"\f119"; }
    .web-icon-p0:before { content:"\f110"; }
    .web-icon-pa:before { content:"\f11a"; }
    .web-icon-pb:before { content:"\f11b"; }
    .web-icon-pc:before { content:"\f11c"; }
    .web-icon-pd:before { content:"\f11d"; }
    .web-icon-pe:before { content:"\f11e"; }
    .web-icon-pf:before { content:"\f11f"; }
    </style>
    </head>
    <body>
    <i class="web-icon-p1"></i> Icon Globo<br/>
    <i class="web-icon-p2"></i> Icon Google plus<br/>
    <i class="web-icon-p3"></i> Icon Grid<br/>
    <i class="web-icon-p4"></i> Icon Key<br/>
    <i class="web-icon-p5"></i> Icon<br/>
    <i class="web-icon-p6"></i> Icon Link<br/>
    <i class="web-icon-p7"></i> Icon LN<br/>
    <i class="web-icon-p8"></i> Icon<br/>
    <i class="web-icon-p9"></i> Icon<br/>
    <i class="web-icon-p0"></i> Icon Fax<br/>
    <i class="web-icon-pa"></i> Icon<br/>
    <i class="web-icon-pb"></i> Icon<br/>
    <i class="web-icon-pc"></i> Icon Quote<br/>
    <i class="web-icon-pd"></i> Icon<br/>
    <i class="web-icon-pe"></i> Icon<br/>
    <i class="web-icon-pf"></i> Icon Print<br/>
    </body>
    </html>
    Solo che in questo caso specifico (diversamente da altri "icon-font" che hanno una pagina di esempio), non conosco le stringhe esadecimali corrispondenti. Allora sto andando per tentativi. In questo caso ho iniziato con "\f11xx" per vedere quali icone corrispondono.

    Ovviamente visto che le combinazioni sono tante mi sembra un lavoro che, o deve essere automatizzato con uno script, oppure pensavo che ci fosse qualche altro modo per determinare le corrispondenze.

    Stemby i 2 link che mi hai indicato sono utili comunque. In ogni caso anche per me è una cosa nuova, usare piccole immagini in questo modo lo trovo vantaggioso perché si possono scalare meglio e puoi trattarle allo stesso modo delle stringhe alfanumeriche

  5. #5
    Quote Originariamente inviata da rel_style Visualizza il messaggio
    Ho scaricato un file (.woff) che utilizzo in una parte di codice CSS, questo definisce una serie di icone e simboli che utilizzo in questo modo
    codice HTML:
    <style>
       .icon-fork:before { content:"\f14d"; }
    </style>
    
    <i class="icon-fork"></i> Fork
    Va bene non ci sono problemi, solo che non riesco a comprendere come bisogna fare per stabilire le accoppiate della stringa esadecimale (nel caso sopra scritto \f14d) con la rispettiva icona generata.

    Devo fare un file dinamico per generare un certo numero di righe per vedere prima a quale immagine corrisponde?
    Magari c'è un sistema più efficace?
    Su Windows puoi utilizzare l'applicazione "Mappa caratteri" per avere un anteprima del "simbolo" ed il relativo codice esadecimale.
    Dovrai però prima installare il font nel sistema facendo doppio click sul file .woff

    Io di solito uso font-awesome che è abbastanza completo.

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2009
    Messaggi
    38
    Quote Originariamente inviata da lucavizzi Visualizza il messaggio
    Su Windows puoi utilizzare l'applicazione "Mappa caratteri" per avere un anteprima del "simbolo" ed il relativo codice esadecimale.
    Credo che qualcosa di analogo esista in qualsiasi sistema operativo.

    Ciao!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.