nicht angemeldet
Symbol anzeigen
0 0 0 0 0 0 0 0 0 
MudGuard
0 0 0 0 0 
Gunnar Bittersmann
0 0 Gunnar Bittersmann
Symbol anzeigen
Servus,
ist es möglich aus einem Dateinamen z.B. hallo.jpg - hallo.doc - hallo.pdf - hallo.doc usw. die Endung herauszufinden und ein Symbol einzublenden?
-
Hallo,
in welchem Zusammenhang? Für die Ansicht im Browser bei Links kannst du Attributselektoren verwenden.
Gruss
MrMurphy
-
Servus,
in welchem Zusammenhang? Für die Ansicht im Browser bei Links kannst du Attributselektoren verwenden.
ich möchte gerne vor dem Dateinamen ein Icon einblenden.
-
Wo und wie steht der Dateiname? Zeig' mal ein Beispiel.
-
Servus,
Wo und wie steht der Dateiname? Zeig' mal ein Beispiel.
<a href="download/229737865.jpg">Bild 01</a> bei PDF <a href="download/229737865.pdf">PDF 01</a> usw...
-
Hallo
a[href$=".jpg"]bzw.
a[href$=".doc"]bzw.
a[href$=".pdf"]selektiert die jeweiligen Links. Mit
a[href$=".pdf"]:before { content: "#"; margin-right: 5px; }sollte vor jedem Link zu einer pdf-Datei ein # eingefügt werden.
Abstände, Farben u.s.w. können mit den jeweiligen CSS-Anweisungen noch hinzugefügt werden.
Gruss
MrMurphy
-
Servus,
a[href$=".pdf"]:before { content: "#"; margin-right: 5px; }vielen Dank. Klappt! Funktioniert dieses auch im Safari und IE 10? Hab hier leider nur Windows 10 mit Edge und Google Chrome
-
Hallo
ja, das sollte funktionieren.
Gruss
MrMurphy
-
Servis,
ja, das sollte funktionieren.
danke. Wollte ein PDF Icon einbinden
a[href$=".pdf"]:before { content: ""; background-image: url("icons/pdf26.png"); margin-right: 5px; }wird aber nicht angezeigt. Muss ich dieses in content:""; setzten?
-
Hi,
a[href$=".pdf"]:before { content: ""; background-image: url("icons/pdf26.png"); margin-right: 5px; }wird aber nicht angezeigt. Muss ich dieses in content:""; setzten?
Das Hintergrundbild wird in dem vom Element (in diesem Fall Pseudo-Element :before) belegten Bereich angezeigt. Bei Inhalt "" und ohne explizite Größenangaben dürfte das Element die Breite 0 aufweisen ...
cu,
Andreas a/k/a MudGuard -
Hallo,
Container ohne Inhalt haben keine Größe. Füge die Grafik mal direkt ein:
content: url("icons/pdf26.png");Ich gehe mal davon aus dass die Pfadangabe korrekt ist, ausgehend von der css-Datei.
Gruss
MrMurphy
-
Servus,
Container ohne Inhalt haben keine Größe. Füge die Grafik mal direkt ein:
content: url("icons/pdf26.png");Ich gehe mal davon aus dass die Pfadangabe korrekt ist, ausgehend von der css-Datei.
vielen Dank, so wird mein Bild auch angezeigt.
-
Hallo,
zur Anzeige von Icons kannst du dich auch mal mit Icon-Fonts beschäftigen, zum Beispiel von Font-Awesome
http://fortawesome.github.io/Font-Awesome/icons/
Die haben zum Beispiel den Vorteil vergrößert werden zu können ohne pixelig zu werden.
Gruss
MrMurphy
-
Servus,
zur Anzeige von Icons kannst du dich auch mal mit Icon-Fonts beschäftigen, zum Beispiel von Font-Awesome http://fortawesome.github.io/Font-Awesome/icons/ Die haben zum Beispiel den Vorteil vergrößert werden zu können ohne pixelig zu werden.
Die wollte ich eigentlich auch verwenden, allerdings bekomme ich diese nicht in content:""; eingebunden. Deshalb bin ich auf icons: http://www.flaticon.com/search/pdf ausgewichen.
-
Hallo,
du musst zunächst die CSS-Datei für die Icons verknüpfen.
Die Zeichen selbst werden per Backslash (nicht dem Slash), gefolgt von einem dem Unicode (pdf zum Beispiel f1c1) eingefügt. Also
content: "\f1c1";Der Unicode für das Iconfont von FontAwesome wird angezeigt, wenn du es auf der von mir verlinkten Seite anklickst.
Gruss
MrMurphy
-
Servus,
du musst zunächst die CSS-Datei für die Icons verknüpfen.
die CSS Datei habe ich bereits eingebunden, da ich bereits andere Grafiken darüber einbinde wie z.B. den Kalender.
Die Zeichen selbst werden per Backslash (nicht dem Slash), gefolgt von einem dem Unicode (pdf zum Beispiel f1c1) eingefügt. Also
content: "\f1c1";Der Unicode für das Iconfont von FontAwesome wird angezeigt, wenn du es auf der von mir verlinkten Seite anklickst.
achso, ich dachte ich binde die so ein:
<span class="fa fa-file-pdf-o"></span>-
Hallo
<span class="fa fa-file-pdf-o"></span>So werden die Iconfonts direkt in den HTML-Quelltext aufgerufen. Wobei sich hinter "fa-file-pdf-o" auch wieder der Unicode verbirgt. Nämlich
.fa-file-pdf-o:before { content: "\f1c1"; }Das funktioniert aber nicht bei den Pseudoelementen :before und :after.
Ich hatte noch die Einbindung der Schriftart vergessen, also
font-family: "FontAwesome"; content: "\f1c1";Gruss
MrMurphy
-
-
-
-
@@MrMurphy1
zur Anzeige von Icons kannst du dich auch mal mit Icon-Fonts beschäftigen
Und wenn man sich damit beschäftigt, kommt man zu dem Schluss, die nicht zu verwenden, sondern SVG.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Servus,
Und wenn man sich damit beschäftigt, kommt man zu dem Schluss, die nicht zu verwenden, sondern SVG.
kannst du mir vielleicht kurz erklären warum man lieber SVG Grafiken nehmen soll anstelle von Icon-Fonts? Ich finde Icon-Fonts sind sehr flexible, lassen sich gut formatieren.
-
@@PHP Anfänger
Und wenn man sich damit beschäftigt, kommt man zu dem Schluss, die nicht zu verwenden, sondern SVG.
kannst du mir vielleicht kurz erklären warum man lieber SVG Grafiken nehmen soll anstelle von Icon-Fonts?
Schnell mal nach „icon fonts svg“ gesucht und schwupps ist man beim Artikel SVG Sprites vs. Icon-Fonts meines geschätzten Kollegen.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Servus,
Schnell mal nach „icon fonts svg“ gesucht und schwupps ist man beim Artikel SVG Sprites vs. Icon-Fonts meines geschätzten Kollegen.
SVG kann ich leider nicht nehmen. Diese werden hier http://www.flaticon.com/free-icon/jpg-file-format-variant_29264 zwar angeboten aber ich kann nur S/W nehmen. Bei png kann ich die Farbe wählen. Daher bleibe ich bei png
-
Guten Morgen,
SVG kann ich leider nicht nehmen. Diese werden hier http://www.flaticon.com/free-icon/jpg-file-format-variant_29264 zwar angeboten aber ich kann nur S/W nehmen. Bei png kann ich die Farbe wählen. Daher bleibe ich bei png
SVG lässt sich auch colorieren etc. codePen, vorausgesetzt die Bereitschaft sich etwas in dieses Format einzuarbeiten und zu entdecken welche Möglichkeiten sich da auftun.
gr qx
-
Servus,
SVG lässt sich auch colorieren etc. codePen, vorausgesetzt die Bereitschaft sich etwas in dieses Format einzuarbeiten und zu entdecken welche Möglichkeiten sich da auftun.
danke für dein Beispiel. Wenn ich diesen Aufwand für jedes Icon (derzeit um die 100) betreibe blähe ich meine CSS Datei nur unnötig auf, dadurch wird diese größer und braucht demzufolge länger zum laden, daher bleibe ich bei meinen Icons und bei Font-Awesome.
-
@@quincunx
SVG lässt sich auch colorieren etc.
Aber ein derart eingebundenes SVG mit CSS zu colorieren geht nicht, oder?
a[href$=".foo"]::before { content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">…</svg>'); }LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-