zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden fa icon von Text umfließen lassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.03.2016, 21:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.03.2008
Beiträge: 25
BallaBalla07 kann nur auf Besserung hoffen
Standard fa icon von Text umfließen lassen

Hallo,
ich möchte ein Bild durch ein Every Font Awesome 4.5.0 Icon ersetzen

Dabei soll der Text um das icon umflossen werden.

So sieht es mit einem Bild aus


Und so mit dem Icon


Was muss ich machen dass es wieder so umflossen ist wie beim Bild?

Code:
.icon_schraubschluessel p:before{content: "\f0ad";
font-size:50px;padding-right: 10px;
font-family: FontAwesome;
.fa-icon();}
HTML-Code:
<div class="icon_schraubschluessel">
<p>Bei uns gibt es keine überteuerten Pauschalen. 
....... </p></div>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.03.2016, 01:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.103
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Was muss ich machen dass es wieder so umflossen ist wie beim Bild?
Das Icon muss genau wie das Bild als selbstständiges Element in den Quelltext übernommen werden. Soweit ich weiß schlägt FontAwesome selbst ein i-Element oder ein span-Element, jeweils ohne Inhalt, vor.

Die Pseudoelemente ::after und ::before befinden sich immer innerhalb ihres Elternelements vor oder hinter dessen Inhalt und können dieses nicht verlassen.

Das könnte dann zum Beispiel so aussehen:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>FontAwesome 01</title>
   <meta name="description" content="HTML5, CSS3, FontAwesome">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);

   /* Clearfix - Micro-Clearfix-Hack */
   @media all {
      .cf::before,
      .cf::after {
         content: " "; /*Leerstelle ist wichtig*/
         display: table;
      }
      .cf::after {
         clear: both;
      }
   }

   @media all {
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         width: 96%;
         margin: 1rem auto;
      }
      .fa {
         font-size: 4rem;
         margin-right: 1rem;
         margin-bottom: 1rem;
         float: left;
      }
   }

   </style>
</head>
<body>
   <h1>Autobahnwahn</h1>
   <p class="cf"><span class="fa fa-wrench"></span>Seit zwei Jahren ist meine Arbeit in Düsseldorf. Meine Familie lebt dagegen in Hamburg. Und dazwischen ich, aber ganz cool. Vollbremskombination aus Ampel oder Einfädeln oder beides auf einmal. Geht nur mit Tricks. Eben noch kurz auf die A 52. Schon vielversprechend lebhaft. Hinter dem Breitscheider Kreuz geht es richtig los. Stau auf der A 3 bis Oberhausen. Danach entspannt es sich auch nur deshalb, weil enge Baustellen mit rüden Geschwindigkeitsbegrenzungen zum gleichmässigen Rollen zwingen. Es wird links überholt, es wird rechts überholt. Es wird gar nichts mehr, alles steht und macht lange Gesichter. Ich dagegen wechsle die Cassette. Es geht weiter. Vor und hinter mir hektische Spurenwechsel. So zieht sich das Stück A 2 bis zum Recklinghauser Kreuz. Der erhofften Entspannung folgt zuverlässig der Vollfrust. Die A 43 bis Münster ist genauso voll wie das Kamener Kreuz zur Rush-hour. Auf der A 1 ist dann endgültig Schluss mit lustig. Alles dümpelt auf der Überholspur. Natürlich mit 90. Rechts geht es schneller, irrerweise wegen der Lkws. Die wollen nämlich alle noch vor zehn zu Hause sein.</p>
</body>
</html>
Gruss

MrMurphy

Geändert von MrMurphy (20.03.2016 um 01:52 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 17:30
Wachsende Container Andy CD CSS 13 10.02.2010 13:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 13:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 20:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 20:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:17 Uhr.