[3.2] [3.2.1] falsches fa-Icon bei neuen Beiträgen

[Tastenplayer]

Stimmt Lehrling

Aber bei mir hat es noch für diverse icons in der style.css Farben definitiert!

Und ja Du hast Recht - habe jetzt das fa-file icon aus der style.css gelöscht und siehe da, es wird angezeigt! Da liegt wohl der Hase im Pfeffer. Und ich habe mich heute den ganzen Tag bald zu Tode gesucht
Merkwürdig ist es trotzdem, denn das fa-folder-icon habe ich dort auch eingefügt und es wird problemlos angezeigt.

[Melmac]

Nur als Anmerkung:
Font Awesome kannst Du als Schrift (= Font) betrachten, die statt Buchstaben eben Symbole/Icons enthält. Definiert wird dies in /assets/css/font-awesome.min.css.
Der Aufbau des CSS-Codes für jedes Icons erfolgt immer nach dem gleichen Schema:[color=#800000]Selektor[/color][color=#004000]Pseudoselektor[/color] {[color=#000000]Eigenschaft[/color]: [color=#0000FF]Wert[/color] }
In diesem Fall also :[color=#800000].fa-file-o[/color][color=#004000]:before[/color] {[color=#000000]content[/color]: [color=#0000FF]"\f016"[/color] }
Wobei "\f016" quasi die "Identifikationsnummer" des Icons ist, das dargestellt wird, wenn die Klasse .fa-icon-o einem Element via der Eigenschaft content zugewiesen wird.

Diese Zuordnung Klasse=>Icon-ID ist von Font Awesome fest vorgegeben - wenn dennoch ein anderes Symbol angezeigt wird als in diesem Stylesheet festgelegt, dann wurde dies irgendwo in den Stylesheets des Styles wieder überschrieben. Plus: da sowas in den 3.2-prosilver-Stylesheets nicht gemacht wird und von den jeweiligen Autoren der Styles ebenfalls nicht, müsste ein solcher ändernder Code in den eigenen Anpassungsfiles "reingerutscht" sein.

Alle zusätzlichen Formatierungen eines Icons über diese grundlegenden Zuweisungen hinaus werden dann in den Stylesheets vorgenommen: entweder durch Zuweisung einer diese Formatierungen enthaltenen weiteren Klasse im HTML oder durch die die jeweilige Klasse ergänzenden Eigenschaften-Werte-Paare in einem der Stylesheets.

Dein Code

Code: Alles auswählen

.fa-file-o::before {
   color: #006fa0;
   font-weight: bold;   
   font-size: 12px;
   content: "";
}

ist doch solch eine eigene Ergänzung, oder?
Falls ja: lösche dort mal die letzte Eigfenschaftszeile (content: "" raus und schaue, obs dann vielleicht wieder stimmt mit der Iconanzeige.

[Tastenplayer]

Ich hab alles gelöscht - aber ich versuch mal nur den content Teil zu löschen.
Allerdings sind etliche icons in der black-silver.css so konfiguriert.
Ich habe lediglich die Farbe geändert und eben noch font-weight bold sowie font-size: 12px angegeben. Bei den anderen Icon hatte ich deswegen keine Probleme bekommen
Allerding wie Kirk richtig schrieb: wenn man bei content statt dem Quadrat die Unicode Bezeichnung angibt, wird es wieder angezeigt.
Aber ich versuch morgen mal was passiert, wenn ich content ganz lösche.

[canonknipser]

statt dem Quadrat die Unicode Bezeichnung

Ja, das liegt wohl daran, dass das Quadrat kein Quadrat ist, sondern ein Ersetzungszeichen, dass von Schriftarten verwendet wird, wenn sie ein Unicode-Zeichen nicht darstellen können. Wenn man dann das aus einer Liste kopiert statt des notwendigen Unicodes ...

[Tastenplayer]

Also ich hab jetzt trotzdem schnell geschaut, hat mir keine Ruhe gelassen:

Code: Alles auswählen

.fa-file::before {
	color: #006fa0;	
}

Diesen Code wieder eingefügt in der black-silver.css und ja es wird so angezeigt.

Ich frage mich jetzt allerdings, es hat etliche icons so in der style.css

Code: Alles auswählen

/* font icon */
.fa-gears::before, .fa-cogs::before {
	color: #e36363;
	content: "";
}

.fa-legal::before, .fa-gavel::before {
	color: #6f89c7;
	content: "";
}

.fa-chevron-circle-up::before {
	color: #fafafa;
	content: "";
}

.fa-external-link-square::before {
	color: #196db5;
	font-size: 14px;
	content: "";
}

.fa-info::before {
	color: #71a6c5;
	content: "";
}

.fa-remove::before, .fa-close::before, .fa-times::before {
	color: #ac1919;
	content: "";
}

.fa-exclamation::before {
	color: #eb2c2c;
	content: "";
}

.fa-pencil::before {
	color: #555;
	content: "";
}

.fa-file::before {
	color: #006fa0;	
}

.fa-quote-left::before {
	color: #555;
	content: "";
}

.fa-file-o::before {
	color: #D33D63;
	content: "";
}

Die werden alle angezeigt! Ist das denn nun so falsch oder weshalb wurde so das fa-file Icon nicht angezeigt? War das womöglich weil ich noch Schriftgrösse sowie Schriftdicke angegeben hatte?

Also muss das

Code: Alles auswählen

content: "";

jetzt normalerweise angegeben werden oder nicht?

[canonknipser]

Also muss das

Code: Alles auswählen

content: ""

jetzt normalerweise angegeben werden oder nicht?

->

.. das liegt wohl daran, dass das Quadrat kein Quadrat ist, sondern ein Ersetzungszeichen, dass von Schriftarten verwendet wird, wenn sie ein Unicode-Zeichen nicht darstellen können. .

Wenn du genau hinschaust, siehst du je nach Schriftart in dem Quadrat den Hex-Code. Diesen musst du angeben, also

Code: Alles auswählen

content: "\f016" 

- der ist natürlich für jedes Icon anders

[Tastenplayer]

Danke canonknipser - ich hatte es eben so gemacht, da es im Style schon so vorgegeben war.
Allerindgs aus reinem Interesse habe ich jetzt den code mal wieder eingefügt und extra mit anderem size:

Code: Alles auswählen

.fa-file-blue::before {
	color: #006fa0;
	size: 18px;
	content: "";
}

.fa-file-red::before {
	color: #8000000;
    size: 18px;	
    content: "";
}

und siehe da, es wird angezeigt.
Ja und das war, weil ich einfach den code kopierte und dann oben nur das Icon änderte. Logisch dass demzufolge dann das Icon aus dem Code angezeigt wurde im Style Wie ich so ein quadrat mit Codeinhalt erstelle weiss ich nicht. Demzufolge also immer den code des font icons eingeben wie von Kirk angegeben. Da hätt ich noch lange suchen können - google hatte mir auch nicht weitergeholfen - schlechte Suchangaben!

Etwas spanisch ist es aber schon, dass alle anderen versuchsweise von mir eingefügten Icons korrekt angezeigt wurden.

Wenn du genau hinschaust, siehst du je nach Schriftart in dem Quadrat den Hex-Code. Diesen musst du angeben, also der ist natürlich für jedes Icon anders

Logisch und kein Problem, ist ja bei jedem Font Awesome Icon oben angegeben.

[Melmac]

Warum die Eigenschaft content, deren Wert ja das letztendlich anzuzeigende Icon definiert, in einem stylespezifischen CSS-File erneut (und dann auch wohl noch falsch, angezogen wird, ist mir ein Rätsel.
Es ergibt einfach keinen Sinn, dies so zu machen, sondern birgt nur unnötige Risiken.

Das Konzept hinter CSS = Cascading StyleSheets wird so doch ausgehebelt, wenn bestimmte Eigenschaften immer wieder erneut definiert werden, ohne dass dabei an den ihnen zugewiesenen Werten etwas geändert wird.

und siehe da, es wird angezeigt.

Glück gehabt - plus jetzt überflüssigen Code an Bord mitschleppend.

[Tastenplayer]

Warum die Eigenschaft content, deren Wert ja das letztendlich anzuzeigende Icon definiert, in einem stylespezifischen CSS-File erneut (und dann auch wohl noch falsch, angezogen wird, ist mir ein Rätsel.
Es ergibt einfach keinen Sinn, dies so zu machen, sondern birgt nur unnötige Risiken.

Gut Melmac, demzufolge überall den content:xxx Teil löschen!

ohne dass dabei an den ihnen zugewiesenen Werten etwas geändert wird.

doch es sind im Style black-silver-split bestimmte Farben für diese Icons definiert! = sehr wohl eine Änderung - oder!

[Melmac]

doch es sind im Style black-silver-split bestimmte Farben für diese Icons definiert! = sehr wohl eine Änderung - oder!

Fange in dem Satz einfach mal ein Stück weiter vorne an beim Lesen - ich mache es extra fett:

wenn bestimmte Eigenschaften immer wieder erneut definiert werden, ohne dass dabei an den ihnen zugewiesenen Werten etwas geändert wird.

content ist eine Eigenschaft, color eine andere, ebenso size ...