Icon in Laufschrift

TTV_FKGMadness · Dec 24th 2020

Ich habe per Hinweis einen Text im Forum veröffentlicht, damit das ganze von rechts nach links scrollt ist der Code Html.

Code

<marquee direction="left" speed="normal" behavior="loop" >
    Das Team Tierischer Treffpunkt wünscht allen Mitgliedern und Gästen ein ruhiges und besinnliches Weihnachtsfest.
  </marquee>

Wie kann ich da hinter dem Text ein Icon / Smilie einbinden?

Danke für eure Tipps!

VG

Buerste

mipu · Dec 24th 2020

Code

<marquee direction="left" speed="normal" behavior="loop" >
    Das Team Tierischer Treffpunkt wünscht allen Mitgliedern und Gästen ein ruhiges und besinnliches Weihnachtsfest.<span class="icon icon16 fa-Dein Icon"></span>
  </marquee>

norse · Dec 24th 2020

https://wiki.selfhtml.org/wiki…dia_und_Grafiken/Grafiken

Gruß norse

TTV_FKGMadness · Dec 24th 2020

Super vielen dank für die Tipps!

VG

Buerste

TTV_FKGMadness · Dec 24th 2020

Ich hab es hiermit hinbekommen

Code

<img src="https://www.tierischer-treffpunkt.de/images/smilies/twemoji/1f381.png" alt=" ">

Mit

Code

<span class="icon icon16 fa-Dein Icon"></span>

hat es nicht funktioniert.

Vielen Dank für eure Hilfe.

Marvin · Dec 25th 2020

Das festgedruckte müsste durch ein entsprechendes Font Awesome 4.7 Icon ersetzt werden.

TTV_FKGMadness · Dec 25th 2020

Quote from Marvin

<span class="icon icon16 fa-Dein Icon"></span>

Das festgedruckte müsste durch ein entsprechendes Font Awesome 4.7 Icon ersetzt werden.

Das weiss ich, hat trotzdem nicht funktioniert

Marvin · Dec 25th 2020

Ok. Bei mir hat es auf Anhieb funktioniert.

Code

<span class="icon icon16 fa fa-star-o"></span>

LRDE · Dec 25th 2020

Soll man heute überhaupt noch marquee nehmen? Ich habe iwo mal gelesen das man es via css und span class machen sollte?

SoftCreatR · Dec 25th 2020

nvm

LRDE · Dec 25th 2020

was ist nun wieder nvm?

Aze · Dec 25th 2020

Quote from LRDE

Soll man heute überhaupt noch marquee nehmen? Ich habe iwo mal gelesen das man es via css und span class machen sollte?

Quote from https://developer.mozilla.org/

Veraltet
Dieses Feature ist veraltet. Obwohl es in manchen Browsern immer noch funktioniert, wird von seiner Benutzung abgeraten, da es jederzeit entfernt werden kann. Es sollte daher nicht mehr verwendet werden.

TTV_FKGMadness · Dec 25th 2020

Und was wäre die Alternative für marquee? Da ich ja auch noch blutiger Anfänger bin...

Tobias777 · Dec 25th 2020

Quote from Buerste

Und was wäre die Alternative für marquee? Da ich ja auch noch blutiger Anfänger bin...

https://codepen.io/jamesbarnett/pen/kfmKa

LRDE · Dec 25th 2020

Hmnm wieso geht das keine 3. Reihe? Versteh ich nicht so ganz?! Schade

TTV_FKGMadness · Dec 25th 2020

Quote from Tobias777

https://codepen.io/jamesbarnett/pen/kfmKa

Hat 1a geklappt. Vielen Dank!

TTV_FKGMadness · Dec 25th 2020

Jetzt hab ich aber noch eine Frage,

die Laufschrift startet nicht mehr ganz rechts sondern relativ weit links.

HTML hab ich so:

Code

<div class="marquee">
  <div>
        <span>Das Team Tierischer Treffpunkt wünscht allen Mitgliedern und Gästen ein ruhiges und besinnliches Weihnachtsfest. </span>              <img src="https://www.tierischer-treffpunkt.de/images/smilies/twemoji/1f381.png" alt=" ">
 
  </div>
</div>

CSS ist so:

Code

body { margin: 0px; }

.marquee {
  height: 25px;
  width: 420px;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;

  position: absolute;
  overflow: hidden;

  animation: marquee 5s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

Display More

Wie bekomme ich das geregelt das die Laufschrift ganz rechtsanfängt?

Aze · Dec 25th 2020

Wo Kann man sich das anschauen?

TTV_FKGMadness · Dec 25th 2020

http://www.tierischer-treffpunkt.de

evtl etwas runter scrollen

mipu · Dec 25th 2020

Teste mal bitte das, bei mir läuft es, so wie es soll.

In den Hinweis.

<div class="rightMarquee">★ Dein Text, den du anzeigen möchtest. ★</div>

CSS

.rightMarquee {
  white-space: nowrap; 
  overflow: hidden;
  animation: marquee 18s linear infinite;
}
.rightMarquee:hover {
  animation-play-state: paused;
}
@-webkit-keyframes marquee {
  0% {text-indent: 100%;}
  100% {text-indent: -100%;}
}

Display More

Icon in Laufschrift

Participate now!

Share