Angular 8 Icon in den Title
hmm
Angular 8 Icon in den Title
hmm
Der Martin
Gunnar Bittersmann
Matthias Apsel
AugeHi,
wie setzt man in Angular 8 ein Icon Bild in den Title des Tabs? Durch Verwendung von private titleService: Title kann ich den Title Text setzen. Aber ich finde die Icon Konfiguration nicht.
Sowas geht leider nicht:
<title id="title"><i class="fa fa-truck"></i> </title>
akzeptierte Antworten
Problem ist mir ein Rätzel
dedlfix
Bewertung: +1, 1 Stimme
-
Hallo,
wie setzt man in Angular 8 ein Icon Bild in den Title des Tabs?
vermutlich genauso wie mit jedem anderen oder ohne Framework.
Durch Verwendung von private titleService: Title kann ich den Title Text setzen.
Das favicon hat nichts mit dem Seitentitel zu tun.
Ciao,
Martin--
Ich stamme aus Ironien, einem Land am sarkastischen Ozean.-
leider klappt das nicht.
ich überlege ob ich irgendetwas in der angular.json setzen muss.
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title id="title">ui</title> <meta name="description" content=""> <meta name="google" value="notranslate"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width"> </head> <body ng-app="uiApp"> <app-root></app-root> </body> </html>gibt mir leider nicht das icon welches unter favicon.ico liegt. Ich bekomme auch keine Fehlermeldung.
-
Moin,
liegt an dem angegebenen Pfad die genannte Datei, sprich exisitert
favicon.icoin deiner Document Root?Viele Grüße
Robert-
ich bekomme keine Fehlermeldung in meiner Chrome Entwickler Console, darum denke ich, dass er die Datei findet.
Die Angular GUI wird in einem Maven Buiuld mit Spring Boot verknotet, darum bin ich mir nicht 100% sicher, aber zu 99%.
-
Moin,
im Netzwerk-Tab kannst du sehen, ob die Ressource angefragt wird und im Inspektor siehst du das generierte DOM, was im Browser ankommt – da sollte das entsprechende
link-Element auftauchen.Viele Grüße
Robert-
im Browser findet ich den Ablageort des Icons. Leider ist der Aufruf des Link Elemnts im Netzwerk Tab nicht vorhanden. D.h. er führt das garnicht aus...
-
-
-
-
-
-
Moin,
Durch Verwendung von private titleService: Title kann ich den Title Text setzen. Aber ich finde die Icon Konfiguration nicht.
Sowas geht leider nicht:
<title id="title"><i class="fa fa-truck"></i> </title>
titledarf nur Text enthalten – und soweit ich das sehe, kann dertitleauch nicht gestylt werden:<!doctype html> <html> <head> <title>Schriftart</title> <meta charset="utf-8"/> <style> title, h1 { font-family: cursive; } </style> </head> <body> <h1>Schriftart</h1> </body> </html>Was aber möglich ist: Symbole in der Liste der Unicodeblöcke finden und verwenden, z.B. das Symbol U+26DF (
⛟): ⛟ (BLACK TRUCK) aus dem Unicodeblock Verschiedene Symbole verwenden:<!doctype html> <html> <head> <title>Schriftart mit ⛟</title> <meta charset="utf-8"/> <style> title, h1 { font-family: cursive; } </style> </head> <body> <h1>Schriftart mit ⛟</h1> </body> </html>Viele Grüße
Robert-
Moin,
möchte der Forennutzer, der meinen Beitrag negativ bewertet hat, mir bitte kurz erläutern, was daran falsch ist? Ich möchte gerne die Qualität meiner Antworten kontinuierlich verbessern.
Danke, Robert
-
@@Robert B.
möchte der Forennutzer, der meinen Beitrag negativ bewertet hat, mir bitte kurz erläutern, was daran falsch ist?
Es galt zu erkennen, was der Fragesteller eigentlich will. Es ging nicht darum, ein Icon in den Titel zu setzen, sondern darum, ein Favicon zu verwenden. Der Martin hat’s erkannt.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Hallo Gunnar,
das Codebeispiel lässt auch eine andere Interpretation zu, ist ergo nicht eindeutig.
Gut, ich komme aus einer anderen Schule, nämlich der, dass man kurz miteinander kommuniziert hat statt einfach negative Bewertungen zu verteilen. Aber was weiß ich schon …
Nachdenkliche Grüße
Robert-
@@Robert B.
Gut, ich komme aus einer anderen Schule, nämlich der, dass man kurz miteinander kommuniziert hat statt einfach negative Bewertungen zu verteilen. Aber was weiß ich schon …
Ich verwende die Bewertungsfunktion i.a.R. nicht dazu, dem Autoren eins auszuwischen. Sondern u.a. dazu, anderen zu zeigen, welchen Postings innerhalb eines Threads sie mehr bzw. weniger Beachtung schenken sollten.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling
-
-
-
-
Hallo,
titledarf nur Text enthalten – und soweit ich das sehe, kann dertitleauch nicht gestylt werdenwas ja auch sinnvoll ist, denn der Titel wird ja in aller Regel außerhalb der eigentichen Webseite angezeigt, z.B. in der Titelleiste des Fensters. Darauf hat der Browser - je nach Window Manager - sowieso keinen Zugriff.
Was aber möglich ist: Symbole in der Liste der Unicodeblöcke finden und verwenden, z.B. das Symbol U+26DF (
⛟): ⛟ (BLACK TRUCK) aus dem Unicodeblock Verschiedene Symbole verwendenMit der möglichen Nebenwirkung, dass diese Symbole nicht korrekt angezeigt werden, weil die beim Besucher verwendete Systemschrift diese Zeichen nicht kennt.
Ciao,
Martin--
Ich stamme aus Ironien, einem Land am sarkastischen Ozean.-
Was aber möglich ist: Symbole in der Liste der Unicodeblöcke finden und verwenden, z.B. das Symbol U+26DF (
⛟): ⛟ (BLACK TRUCK) aus dem Unicodeblock Verschiedene Symbole verwendenMit der möglichen Nebenwirkung, dass diese Symbole nicht korrekt angezeigt werden, weil die beim Besucher verwendete Systemschrift diese Zeichen nicht kennt.
"Mögliche Nebenwirkung" ist "freundlich gesagt". Bildschirmfoto:
-
-
@@Robert B.
und soweit ich das sehe, kann der
titleauch nicht gestylt werden:Das siehst du falsch.
titlekann gestylt werden wie so ziemlich jedes andere Element auch. ☞ CSS-ÜberraschungDas bezieht sich natürlich auf dessen Darstellung im Viewport. Auf Verwendungen außerhalb des Viewports wie im Browser-Chrome hat man mit CSS natürlich keinen Einfluss.
Was aber möglich ist: Symbole […] verwenden:
Wie gesagt war das am Thema vorbei. Nicht an dem, was @hmm als Thema angegeben hatte, aber an dem, was sie/er meinte.
Ich weiß nicht, was die Motivation für die Pluspunkte war. Ich tippe auf Mitleid.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Hallo Gunnar Bittersmann,
und soweit ich das sehe, kann der
titleauch nicht gestylt werden:Das siehst du falsch.
titlekann gestylt werden wie so ziemlich jedes andere Element auch. ☞ CSS-ÜberraschungWobei das natürlich an der dem Element inhärenten Verwendung vorbei geht. Weil
Das bezieht sich natürlich auf dessen Darstellung im Viewport. Auf Verwendungen außerhalb des Viewports wie im Browser-Chrome hat man mit CSS natürlich keinen Einfluss.
Deshalb geht deine CSS-Überraschung am Thema vorbei.
Was aber möglich ist: Symbole […] verwenden:
Wie gesagt war das am Thema vorbei. Nicht an dem, was @hmm als Thema angegeben hatte, aber an dem, was sie/er meinte.
Woraus schlussfolgerst du das?
Ich weiß nicht, was die Motivation für die Pluspunkte war. Ich tippe auf Mitleid.
Manchmal täte dir etwas weniger Hybris echt gut.
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.-
@@Matthias Apsel
titlekann gestylt werden wie so ziemlich jedes andere Element auch. ☞ CSS-ÜberraschungWobei das natürlich an der dem Element inhärenten Verwendung vorbei geht.
Ja, es ist unüblich, die Metainformationen aus dem
headim Viewport darzustellen. Es ging hier darum, die Möglichkeit aufzuzeigen, das zu tun.Deshalb geht deine CSS-Überraschung am Thema vorbei.
Nein. Das Thema dieses Abschnitts war: die Möglichkeit aufzuzeigen, die Metainformationen aus dem
headim Viewport darzustellen.Wie gesagt war das am Thema vorbei. Nicht an dem, was @hmm als Thema angegeben hatte, aber an dem, was sie/er meinte.
Woraus schlussfolgerst du das?
Aus dem Inhalt des OP.
Ich weiß nicht, was die Motivation für die Pluspunkte war. Ich tippe auf Mitleid.
Manchmal täte dir etwas weniger Hybris echt gut.
??
Ich vergebe einen fachlichen Minuspunkt für ein Posting, das am Thema der Fragenden vorbeiging, und einen Pluspunkt für ein Posting, wo erkannt wurde, was der Fragende wissen wollte. Auf Nachfrage erkläre ich, dass ich Punkte vergebe, um „anderen zu zeigen, welchen Postings innerhalb eines Threads sie mehr bzw. weniger Beachtung schenken sollten.“
Dann kommen andere und führen ebendas ad absurdum: Martins hilfreiches Posting steht jetzt mit +1 schlechter da als Roberts nicht hilfreiches mit +2.
Sollte das jetzt ein Aufreger sein? Wohl nicht. Die Bewertungsfunktion war schon immer absurd.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling
-
-
-
-
Also...
<link rel="icon" type="image/x-icon" href="favicon.ico">meine index.html meiner Angular8 App schickt keinen Request raus bzw. sehe ich keinen in meiner Entwickler Chrome Konsole.
Ich habe das ganze in einer HelloWorld Angular8 App getestet, da funktioniertes das ganze und es wird auch eine Request zum favicon in der Konsole angezeigt.
Wie kann ich den Fehler aufspüren? In meiner Hello World App nutze ich die gleiche index.html und habe die folgenden Module mit importiert
import { HashLocationStrategy, LocationStrategy } from '@angular/common'; import { Title } from '@angular/platform-browser';Ich kann den Fehler nicht rekonstruieren.
-
er zieht sich aber u.a. ein Bild das per CSS geladen wird.
das ganze sieht so aus als würde er diese html codezeile einfach nicht ausführen...
-
Hallo
<link rel="icon" type="image/x-icon" href="favicon.ico">meine index.html meiner Angular8 App schickt keinen Request raus bzw. sehe ich keinen in meiner Entwickler Chrome Konsole.
Liegt die favicon.ico im selben Verzeichnis wie das mit Angular erstellte HTML-Dokument?
Tschö, Auge
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett-
ja und ich kann das Icon nach start der Anwendung unter der entsprechenden Url im Browser aufrufen.
Mich wundert, dass meine index.html keinen Request zur favicon erzeugt.
-
-
Tach!
<link rel="icon" type="image/x-icon" href="favicon.ico">meine index.html meiner Angular8 App schickt keinen Request raus bzw. sehe ich keinen in meiner Entwickler Chrome Konsole.
Browser verwalten/cachen das Favicon selbständig und fragen nicht ständig den Server danach.
Ich habe das ganze in einer HelloWorld Angular8 App getestet, da funktioniertes das ganze und es wird auch eine Request zum favicon in der Konsole angezeigt.
Davon hatte der Browser vermutlich noch kein Favicon im Cache.
Ich kann den Fehler nicht rekonstruieren.
Weil es kein Fehler ist, sondern Browserverhalten. Du kannst da vermutlich nur rumtricksen, indem du die URL jedes Mal änderst (zum Beispiel im Querystring), um ein erneutes Holen zu erzwingen.
dedlfix.
-
danke, das mit dem Cache könnte die Erklärung sein.
ich habe jetzt den Cache im Explorer und in Chrome gelöscht.
in Chrome hat sich nichts geändert, es wird nach wie vor kein Bild angefordert. Im Explorer wird ein Bild angefordert, leider wird das falsche Bild angezeigt. In der Explorer URL ist aber ein Pfad drin der zum richtigen Bild führt.
Ich vermute, dass ich den Cache nicht richig gelöscht habe. Aufjedenfall staune ich Bauklötze. Das der IE das alte Icon (das von Angular) anzeigt ist schon krass.
Kann ich das Icon per CSS setzen?
-
Hallo
Kann ich das Icon per CSS setzen?
Nein.
Tschö, Auge
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett
-
-
hm.... ich hab alle Browserdaten im IE gelöscht und neu gestartet, jetzt klappts. In Chrome wirds dann auch gehen.
Danke.
-
-
Moin,
vergleich mal bitte
<link rel="icon" type="image/x-icon" href="favicon.ico">mit dem Link, den dir @Der Martin vorgeschlagen hat 😉
Viele Grüße
Robert
-
