eigene Icons

DieMelone

Mein Anliegen kurz und knapp:
eigene Icons (wie Unicode) erstellen und nutzen können, keine eigene Schriftartund auch keine Bilder!

Hallo zusammen,

ich habe seit längerem eine Webseite/ Blog am laufen und frage mich auch schon lange wie ich denn eigene Icons erstellen kann.

Ich habe auch eine Schriftart mit den gewünschten Zeichen schon probiert, leider wird diese auf diversen Mobilgeräten als normale Schirft geladen und nicht als Symbol welches ich zu dem Buchstaben hinterlegt wird (Schriftarten werden wohl bei Mobilgeräten nicht immer geladen?). Natürlich habe ich es auch immerwieder mit Bildern probiert, das ist aber wirklich keine befriedigende Lösung.

Am liebsten wäre mir eine Art Website eigener Unicode falls das möglich ist.

Vielleicht kann ja einer der erfahrenen Leute hier bei meinem Problem helfen

Danke
-DieMelone

modem-kind

Hallo Melone,
ja Schriften die auf einem Gerät nicht vorhanden sind werden nicht angezeigt
und dafür die nächst vorhandene dann verwendet..

außer Du wenn Du die gewünschte Schrift richtig eingebunden hast...

lies mal dieses :
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Google-Fonts

vielleicht hilft es Dir ja schon..
sonst kannst Dich ja noch mal hier melden -

Gruß modem-kind

DieMelone

Hallo modem-kind,

ich habe die Schriftart mit @font-face eingebunden, leider erfolglos.

Code

@font-face {
font-family: 'meine-schrift';              
src: url('pfad/zu/meinerschrift.ttf') format('truetype'); 
}

habe ich einen falschen Code benutzt?

Gruß

modem-kind

Moin Melone,

nee.. sieht ganz gut aus... WENN :

1.
die schrift dann auch den entsprechenden Elementen die es haben sollen
auch zugewiesen ist mit :
html, body{
font-family: meine-schrift; /'' muss so sein */
height: 100%; /'' kann anders sein frei wähbar */
font-size: 16px; /'' kann anders sein frei wähbar */
color: #ffffff; /'' kann anders sein frei wähbar */
}

2.
DER PFAD zur Schrift auch stimmt und richtig geschrieben ist !!!
meist so : ../fonts/meine-schrift.ttf

3.
Die Schrift auf dem Server auch wirklich als Dateien vorhanden sind !

4.
und zu 3. > am besten in mehreren Formaten .woff .woff2 .eot .svg .ttf
was dann auch in @font-face angegeben werden muss -
also so: ( ((das ist aber nicht unbedingt notwendig nur für einige ältere Browser - truetype sollte eigentlich reichen )))
@font-face {
font-family: 'robotomedium';
src: url('../fonts/Roboto-Medium-webfont.eot');
src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Medium-webfont.woff2') format('woff2'),
url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Medium-webfont.svg#robotomedium') format('svg');
font-weight: normal;
font-style: normal;
}

---------------------------------------------------------------------------------

Schriften von anderen Quellen müssen nicht auf dem eigenem Server vorhanden sein und @font-face: !! - entfällt - !!
Einbindung so :
<head>
<blabla
<blabla
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Courgette"/>
</head>

last:
es gibt auch noch andere Möglichkeiten Symbole einzubinden

good Luck modem-kind

Tags