leggere valore unicode font icona

[al404]

devo creare un CSS con un font custom di icone e non so come leggere il valore unicode di ogni icona
uso un MAC e non conosco nessuna applicazione che lo faccia, se avete qualche suggerimento
alla peggio anche un app windows

.font-icon-pencil:before {
content: "\e038";
}

devo leggere il valore da inserire per content

[Mich_]

Non so risponderti.

Pero` in rete puoi trovare tutti i valori unicode, ad esempio puoi partire da 'HTML Character Sets' oppure da una ricerca in rete.

[al404]

il font è un font di icone tipo http://glyphicons.com o simili
a me servirebbe qualche cosa che aprendo il font e selezionando il carattere mi dicesse qual'è il suo valore

[Mich_]

Anzitutto va detto che il codice unicode (che per i caratteri ASCII coincide con questo) e` unico per tutti i tipi di font.

Comunque la cosa che chiedi potrebbe essere possibile realizzarla tramite JS, se nel codice HTML e` scritto il codice che ti serve.


Ma adesso ho aperto la pag da te segnalata con FireFox, ed ho provato a cliccare su un simbolo:
magicamente si apre un pop-up di cui allego l'immagine
Immagine.jpg

Non so se e` questo che cercavi ...

[al404]

il mio font è tipo quello linkato, ma il grafico lo ha assembrato tramite questo sito http://www.flaticon.com con 94 elementi
di questi 94 ne userò solo 15 che ho in ordine sparso nel font

a me è stato passato solo il file del font in formato .eot, .woff e .ttf

ho scritto la parte di CSS per utilizzare il font ma mi manca quella dove dichiaro le classi per le icone che mi servono perchè non so come leggere il valore unicode sul mac ( o al limite da PC ) dal gestore font o da una qualche app specifica ( che non conosco )

ad esempio nel tuo screenshot si vede nel pop up e011

.font-icon-macchinafoto-screenshoot:before {
content: "\e011";
}

[Mich_]

Il sito citato usa una serie di immagini, non i codici unicode.

Mi spiego meglio.
Nella pag linkata, ci sono una serie di immagini, ciascuna delle quali contiene il set di caratteri gia` montati in una immagine completa.
Cliccando su una immagine si arriva ad una nuova pagina, con le icone ingrandite, ma nella tabella (che poi non e` una <table> ma una serie di <div>) ci sono le immagini, non i font.
L'unica cosa che cambia tra un carattere e l'altro e` un numero d'ordine all'interno del font.
Il numero lo si vede dal codice HTML, di cui posto un esempio:

<div class="glyph-container" title="Halloween ugly pumpkin face" id="12353" data-kw="halloween51" data-code="23" data-p="2.17" data-a="">             
  <a class="add opt" href="javascript:void(0)">
                <div class="glyph-icon fi-more2"></div>
             </a>
             <a class="see opt" href="http://www.flaticon.com/free-icon/halloween-ugly-pumpkin-face_12353">
                <div class="glyph-icon fi-detail"></div>
              </a>
             <div class="glyph">
                <div class="glyph-row">
                  <img class="glyphImg" src="http://cdn.flaticon.com/png/64/12353.png">
                </div>
              </div>
            </div>

A parte gli errori di semantica del codice (un <div> non puo` stare dentro un <a>), il numero (in questo caso 12353) e` un numero progressivo che cambia ad ogni carattere e che quindi lo identifica. Tale numero si puo` anche trasformare in esadecimale (in questo caso \3041 ).
E credo che il 23 sia l'ordine del carattere all'interno del font e il 2.17 indichi che e` il 17esimo della seconda pagina.

Se ti basta fare il lavoro una volta per tutte, la cosa potrebbe quindi essere fattibile, con un po' di pazienza (e una calcolatrice scientifica o da programmatore - io ho usato quella di window)

[al404]

scusami, ho linkato quel sito e non esaminato la demo
scusa due volte data la pazienza ma in realtà ero convinto funzionasse come quello di bootstrap

http://getbootstrap.com/components/

che è quello che serve a me

se prendiamo ad esempio la casetta
l'HTML è

<li>
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-home</span>
</li>

mentre il CSS

.glyphicon-home:before {
content: "\e021"
}

EDIT: a me servirebbe un applicazione, perchè questa volta ho questo font ma la prossima me ne mandano uno differente con 100 elementi dei quali ne devo usare 5 ma in ordine sparso
non posso conteggiarli ogni volta o meglio diventa un lavoro lungo

esiste questa applicazione per mac ma costa una follia ( per quello che serve a me )
spero che ce ne siano di più semplici e più economiche

http://www.glyphsapp.com

[Mich_]

Comincio a capire.

Allora tu vedi una pag. HTML, con CSS associato.
Dal file CSS vorresti estrarre il codice associato al content della classe che ha il nome del carattere.

Io farei in questo modo (ma non so se ci sono soluzioni migliori):
1. apri la pagina
2. cerchi il sorgente
3. cerchi il file CSS (in questo caso si chiama bootstrap.min.css )
4. salvi (o apri) il file
5. cerchi il nome del carattere
6. nel testo successivo cerchi la parola content
7. successivamente cerchi quanto e` racchiuso dalle virgolette

Nota che i punti da 5 in poi si possono implementare tramite RE (regular expression)
Invece i punti da 1 a 4 si possono in qualche modo automatizzare.


Il tutto presuppone che non si possa modificare il codice sorgente della pagina (altrimenti basterebbe inserire un JS nel codice che fa le stesse cose).

Eventualmente, se questa proposta e` la soluzione definitiva, sposto la discussione in programmazione

[al404]

No, io devo scriver HTML e CSS partendo dal font che ho io che è tipo quello di bootstrap ma con una serie personalizzata di icone

HTML e CSS so come scriverli, a parte l'assegnazione del carattere giusto alla classe

questo è il mio font visto in libro font
http://cl.ly/YmhY

questo il codice CSS completo

/* @group Font */


@font-face {
font-family: 'MyIcons';
src:url('fonts/MyIcons.eot');
src:url('fonts/MyIcons.eot?#iefix') format('embedded-opentype'),
url('fonts/MyIcons.woff') format('woff'),
url('fonts/MyIcons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}


[data-icon]:before {
font-family: 'MyIcons';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}


[class^="font-"]:before, [class*=" font-"]:before {
font-family: 'MyIcons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}


.font-icon-pencil {
font-family: 'MyIcons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}


.font-icon-pencil:before {
content: "\e038";
}


/* @end */

quello che mi manca è associare ad ogni singola classe un carattere

[Mich_]

Questo lo ho capito (credo).

Ma come avere il numeretto che devi inserire?
Il metodo che ho proposto prima serve proprio a quello.

Io ritengo che non puoi estrarre da una pagina Web dentro il brwoser qualcosa che non viene visualizzato.
Quello che puoi fare e` estralo dal codice, che puoi vedere tramite tasto destro e "visualizza codice".