Προς το περιεχόμενο

Εισαγωγή εικονιδίων σε HTML από Font-Awesome

silve

Από τον silve
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

silve Mentor

silve

Δημοσ.
Δημοσ.

Γεια χαρά!

 

Θα μπω κατευθείαν στο θέμα. Φτιάχνω ένα email template και στην αρχή γράφω τον εξής κώδικα για να εισάγω την γραμματοσειρά Open Sans.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

Θέλω λοιπόν να χρησιμοποιήσω ορισμένα εικονίδια στο template μου από το γνωστό site Font-Awesome απλά γράφοντας τον αντίστοιχο κώδικα της εικόνας για παράδειγμα "". Φαντάζομαι πως, όπως έχει γίνει η εισαγωγή της γραμματοσειράς στην αρχή, κάπως έτσι θα γίνεται και με τα εικονίδια. Έχω δοκιμάσει αρκετούς κώδικες αλλά δεν δούλεψε. Αντί για το εικονίδιο μου βγάζει ένα μικρό κενό τετραγωνάκι.

 

Ένας από τους κώδικες που έχω δοκιμάσει:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

Μπορεί κάποιος να βοηθήσει αν φυσικά είναι εφικτό αυτό που ζητάω;

Predatorkill Grand Master

Predatorkill

Δημοσ.
Δημοσ.

<i class="fa fa-map-marker"></i>

 

για να εμφανιστει το εικονιδιο:

 

AH39KI4.png

 

δεν σου δουλευει ετσι;

 

αλλιως παιζει να συμβαινει αυτο με το unicode: 

 

 

It does not work, because <i></i> simply asks the browser to display the Private Use code point U+F015 using an italic typeface. The Font Awesome CSS code has nothing that would affect this. If you add class=icon-home to the tag, you will get the glyph assigned to U+F015 in the FontAwesome font, but you will get it twice, due to the way the Font Awesome trickery works.

To get the glyph just once, you need to use CSS that asks for the use of the FontAwesome font without triggering the rules that add a glyph via generated content. A simple trick is to use a class name that starts with icon- but does not match any of the predefined names in Font Awesome or any name otherwise used in your CSS or JavaScript code. E.g.,

<i class=icon-foo></i>

Alternatively, use CSS code that sets font-family: FontAwesome and font-style: normal on the i element.

PS. Note that Private Use code points such as U+F015 have, by definition, no interoperable meaning. Consequently, when style sheets are disabled,  will not be displayed as any character; the browser will use its way of communicating the presence of undefined data, such as a small box, possibly containing the code point number.

  • Like 1
silve Mentor

silve

Δημοσ.
  • Μέλος
Δημοσ.

Μηπως το tag γινεται overwritten απο το δικο σου font; Εχεις πουθενα live το αποτελεσμα να ριξω μια ματια;

 

Έγραψα πολύ γρήγορα ένα παράδειγμα για να καταλάβεις τι εννοώ.

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML TITLE</title>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

</head>

<body style="padding:0; margin:0;">
<p style="font-weight:600; letter-spacing: 0.025em; font-size:25px; color:#606060; font-family:'Open Sans', sans-serif; mso-line-height-rule: exactly;">
This is a test text
</p>



</body>
</html>

Βάλε αυτόν των κώδικα εδώ και θα δεις αντί για το εικονίδιο ένα τετραγωνάκι.

 

 

@Predatorkill

Δοκίμασα και αυτό που γράφεις (<i class=icon-foo></i>) αλλά πάλι τα ίδια κάνει.

Predatorkill Grand Master

Predatorkill

Δημοσ.
Δημοσ.

Έγραψα πολύ γρήγορα ένα παράδειγμα για να καταλάβεις τι εννοώ.

 

 

@Predatorkill

Δοκίμασα και αυτό που γράφεις (<i class=icon-foo></i>) αλλά πάλι τα ίδια κάνει.

 

 

Αυτο το δοκιμαςσες; 

 

Alternatively, use CSS code that sets font-family: FontAwesome and font-style: normal on the i element.

 

βαλτον και θα δεις οτι δουλευει, τον δοκιμασα μολις τωρα:

 

 

 

<html>
<head>
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML TITLE</title>
 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'rel='stylesheet' type='text/css'>
 
</head>
 
<body style="padding:0; margin:0;">
<p style="font-weight:600; letter-spacing: 0.025em; font-size:25px; color:#606060; font-family:'Open Sans', sans-serif; mso-line-height-rule: exactly;">
This is a test text
</p>
 
<i class="fa-5x" style=" font-family: FontAwesome; font-style: normal; "></i>
 
</body>
</html>
silve Mentor

silve

Δημοσ.
  • Μέλος
Δημοσ.

Ναι δουλεύει μια χαρά αυτό! Είχα προσπαθήσει κάτι παρόμοιο αλλά προφανώς κάτι θα μου ξέφυγε. Ευχαριστώ!

silve Mentor

silve

Δημοσ.
  • Μέλος
Δημοσ.

Επειδή λες ότι πρόκειται για email... έχεις τσεκάρει compatibility στους email clients...?! :D

 

Ναι έχεις δίκιο αν το συγκεκριμένο δουλεύει και στους email clients (αν και νομίζω πως θα δουλεύει). Αν δε δουλεύει πάντως, μπορώ απλά να κάνω τα εικονίδια export σαν images και να τα εισάγω έτσι στον κώδικα ή αλλιώς θα επανέλθω εδώ μπας και βρούμε καμιά άκρη.

:-D

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...