2015-08-13 19 views
5

Ich verwende Flaticon für eine Website, die ich entwickle, aber es scheint etwas falsch zu sein und ich kann nicht herausfinden, was.Größe kann nicht geändert werden mit

Ich habe die Zip-Datei von flaticon mit der Option "icon font" heruntergeladen. so habe ich es in den Ordner meiner Schrift hochgeladen, aber aus irgendeinem Grund, wenn ich die CSS verbinden und eine <i class="flaticon-crowd"><i> in meinem HTML setzen, bekomme ich das Symbol in seiner Standardgröße, aber wenn ich font-size:70px; in die CSS setzen wird es nicht größer.

Ich kann color: #f00; tun und der Text wird rot, so dass es nicht der Selektor ist. Auch in den def-Tools in Chrome zeigen, dass die 70px Schriftgröße verwendet und nicht übergangen wird.

Weiß jemand, was es sein könnte, dass dieses Problem verursacht?

danke für deine zeit. Hier

ist ein Beispiel für den HTML-Code verwende ich

<!DOCTYPE html> 
<html> 
    <head> 
     <!-- flaticon --> 
     <link rel="stylesheet" type="text/css" href="assets/css/flaticon/flaticon.css"> 

     <title></title> 
    </head> 
    <body> 
     <i style="font-size: 70px" class="flaticon flaticon-crowd"></i> 
    </body> 
</html> 
+0

@paulie Ich habe Beispiele gesehen, die Schriftgröße verwenden, aber ich habe auch versucht, Größe und Höhe zu verwenden, aber es hat das Symbol in keiner Weise beeinflusst. Auch gibt es keine Möglichkeit, dies neu zu erstellen. Es ist in die Seite eingebaut und es ist einfach passiert. Ich fange an zu denken, dass ich mit etwas ielse kollidieren könnte. – Controvi

+0

Ich habe gerade das Codebeispiel hinzugefügt. In dieser Situation funktioniert es nicht. auch als Zustand im OP Ich habe den Fonticon zip heruntergeladen. Befolgen Sie auch die Anweisungen, wie Sie sie zur Seite hinzufügen. Auf anderen Websites wird es mit Schriftgröße verwendet, so wie ich es heruntergeladen habe als Fonticon Ich nehme an, dass es als Schriftart und nicht als etwas anderes gesehen wird – Controvi

+0

OK ... haben Sie irgendwelche CSS ... wie die '@font -Fläche "Anweisung, um die Schriftart zu laden. Heck, hast du einen Link zu einer Live-Seite, die wir anschauen können ... vielleicht wäre das einfacher? –

Antwort

3

Einsatz in Dein CSS, um die Schriftgröße zu ändern.

 
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { 

font-size: 150px; 

} 

Ich hoffe, es wird Ihr Problem lösen.

+0

Guter Punkt und gerade versucht, aber hat nicht funktioniert. gibt es einige Webseiten, von denen ich weiß, dass sie es benutzen und sie benutzen die Schriftgröße. Also sollte es funktionieren, aber ich habe keine Ahnung, was ich falsch mache – Controvi

+0

Ich habe die Antwort geändert. Diesen habe ich überprüft. es funktioniert in meiner Seite. –

+0

es funktionierte wie ein Charme. Es ist ziemlich seltsam, dass es nicht mit normalen Klassen und Schriftgrößen funktioniert Danke für die Hilfe! – Controvi

0

für sicher, dass Sie !important auf Ihre CSS-Deklaration

Zum Beispiel könnte hinzufügen: diese Klasse

font-size:100px !important; 
+0

Sache ist, dass es nicht überschrieben wird. Aber ich habe versucht, das! Wichtig, aber leider tat nichts. – Controvi

+0

@ Controvi Verwendung http://fortawesome.github.io/Font-Awesome/ – Nabi

+0

Ich bin, aber sie haben nicht einige der Ikone, die ich brauche. ;) – Controvi

0

Verwenden Sie die Pseudoklasse: vor, um das Symbol wie gewünscht zu ändern. Sie können alle Texteigenschaften von CSS anwenden, um die Symbole zu ändern.

.flaticon-crowd:before { 
    font-size: 17px; 
} 
-1

Löschen Sie einfach die Schriftgröße: 20px; gefunden in der flicicon.css Datei und dann können Sie die gewünschte Größe in Ihrer CSS-Datei einstellen.

1

Das ist für mich gearbeitet:

.flaticon-fast46::before{ 
font-size: 40px;} 
5

Eine bessere Lösung wäre:

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, 
[class^="flaticon-"]:after, [class*=" flaticon-"]:after { 

font-size: 1em; 

} 

die Größe des Symbols Dann können von anderen Klassen modifiziert werden unter Verwendung von font-size

0

In flaticons.css ändern Sie die Standardklasse in diese:

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, 
[class^="flaticon-"]:after, [class*=" flaticon-"]:after { 
    font-family: "Flaticon" !important; 
    font-style: normal !important; 
    font-weight: normal !important; 
    font-variant: normal !important; 
    text-transform: none !important; 
    speak: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
0

Es funktioniert für mich. Fügen Sie :before nach der Elementklasse hinzu, die Sie für Symbole verwenden möchten.

span:before{ 
font-size: 50px; 
} 
Verwandte Themen