Icon in Laufschrift

TTV_FKGMadness · December 24, 2020 at 1:21 PM

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 · December 24, 2020 at 1:27 PM

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 · December 24, 2020 at 1:30 PM

https://wiki.selfhtml.org/wiki/HTML/Mult…afiken/Grafiken

Gruß norse

TTV_FKGMadness · December 24, 2020 at 8:11 PM

Super vielen dank für die Tipps!

VG

Buerste

TTV_FKGMadness · December 24, 2020 at 9:25 PM

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 · December 25, 2020 at 1:51 AM

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

TTV_FKGMadness · December 25, 2020 at 9:44 AM

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 · December 25, 2020 at 9:48 AM

Ok. Bei mir hat es auf Anhieb funktioniert.

Code

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

LRDE · December 25, 2020 at 10:23 AM

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

SoftCreatR · December 25, 2020 at 11:21 AM

nvm

LRDE · December 25, 2020 at 11:39 AM

was ist nun wieder nvm?

Aze · December 25, 2020 at 11:56 AM

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 · December 25, 2020 at 1:33 PM

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

Tobias777 · December 25, 2020 at 1:45 PM

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 · December 25, 2020 at 2:37 PM

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

TTV_FKGMadness · December 25, 2020 at 2:41 PM

Quote from Tobias777

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

Hat 1a geklappt. Vielen Dank!

TTV_FKGMadness · December 25, 2020 at 4:00 PM

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 · December 25, 2020 at 5:02 PM

Wo Kann man sich das anschauen?

TTV_FKGMadness · December 25, 2020 at 5:16 PM

http://www.tierischer-treffpunkt.de

evtl etwas runter scrollen

mipu · December 25, 2020 at 5:42 PM

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

Participate now!