Wie kann ich diese Icons verschieben CSS?

Wie kann ich diese Icons verschieben? Wenn ich ihnen einen margin gebe wird das feld größer...

5 Antworten

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

19.11.2018, 14:13

100 Pixel nach rechts verschieben:

margin-left:100px

Nach rechts unten an die Seite verschieben:

position:absolute;
bottom:0;
right:0

Wohin willst Du sie denn verschieben?

Alex

freudenstrahl

19.11.2018, 12:48

Poste mal Deinen Code-Teil lauffähig auf z.Bsp.: https://codepen.io/

Außerdem:
Was außerdem verstehst Du unter Icon's verschieben - was genau willst
Du damit erreichen ?
Willst Du Du Icon's Links/Rechtsbündig haben was genau brauchst Du ?

Woher ich das weiß:Berufserfahrung

RoadRage3

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

19.11.2018, 12:22

Hallo LysergLizard,

Da ich nicht den gesamten Code zur Verfügung habe kann ich nur schätzen:

In der Klasse "btn" ist ebenfalls ein Margin eingefügt welcher "gerade so reicht" um Icon und Text anzuzeigen.

Möglichkeit wäre natürlich, in der btn Klasse das Margin zu verkleinern und so den Button auf der gleichen Größe lassen können.

Ich hoffe das ist verständlich erklärt. Wenn nicht, frag noch mal :D

Ben

GanMar

19.11.2018, 12:17

Was verstehst Du unter "verschieben"? Was genau möchtest Du machen? Welches "Feld" wird größer?

FragenFrager666

19.11.2018, 12:14

Kannst du irgendwie den Code posten?

LysergLizard

Beitragsersteller

19.11.2018, 12:17

habe ich doch?

FragenFrager666

19.11.2018, 12:18

@LysergLizard

Ich bräuchte den Code zum kopieren, außerdem die CSS-Datei.

Ähnliche Beiträge

Tabelle in html mit CSS verschieben?

Habe eine Tabelle:

<table class="anker"

<tr>

<td>Anker 1</td>

</tr>

wollte die tabelle dann mit css:

table.anker{

margin-top: 50px;}

verschieben, aber wenn verschoben wird verschwinden die rahmen von der Tabelle

...zum Beitrag

CSS margin verschiebt falsches element?

Hallo!

Obwohl ich schon seit einigen Jahren recht sicher in Programmiersprachen wie Java und C# bin, hab ich mich jetzt an ein Webprojekt gewagt. Ich benutze React, doch brauche natürlich auch CSS.

Jetzt habe ich folgendes Problem. Ich will hier den Titel einfach um 1em nach unten verschieben. Wie schaffe ich das? Ich habe es einfach mit

margin-top: 1em;

versucht, aber dadurch wird aus irgendeinem Grund das ganze

<div className='home'>

nach unten verschoben. Wieso?

Unten findet ihr Bilder, zum einen wie es ohne margin aussieht, dann wie es mit margin aussieht. Hier findet ihr den Code:

HTML:

<div className='home'>
    <h1>Willkommen!</h1>

</div>

CSS:

.home{
    background: #375398;
    height: 100vh;
    width: auto;
    margin-left: 250px;
}

h1{
    font-size: 3rem;
    color: white;
    margin-left: 1em;
    /*margin-top: 1em*/
    }

...zum Beitrag

Wieso funktioniert margin-left, aber margin-right nicht?

Im CSS-Dokument

...zum Beitrag

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zum Beitrag

HTML / CSS: Warum lässt sich das Bild nicht nach links bewegen?

HTML:

<div class="mittecrew_png">
  <img src="mittecrew.png" height="105"; widht="1505";>
  <a href="#"></a>
</div>

CSS:

.mittecrewpng {
  margin-left: 100px;
}

...zum Beitrag

HTML Label verschieben?

Möchte gerne das Label im untenstehenden HTML Code verschieben. Hab es mit margin im Css versucht weis aber nicht ganz genau wie es geht.

<!DOCTYPE html>

<html>

<head

<title>Probe Seite</title>

</head>

<body>

<h1> Textfelder erstellen </h1>

<label for "vname"> Vorname:

<button type="button" id="button"> auslesen </button>

</label for "vname">

</body>

</html>

...zum Beitrag

<form> verschieben?

Hallo,

ich versuche ein formular zu verschieben. mit margin-left bin ich erfolgreich, allerdings kann ich dann nach rechts rausscrollen. ich hab ein backgroundimage drin, deshalb nervt mich das ungemein.

wie kann ich das einfach mittig zentrieren?

...zum Beitrag

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zum Beitrag

Wie kann ich Bilder in HTML bzw. CSS horizontal automatisch verteilen?

Ich möchte gern auf meiner Webseite (Schulaufgabe - die Lehrerin hat natürlich mal wieder alles genau erklärt) einige Bilder horizontal über die Breite des Feldes verteilen. Das aber nicht mit absoluten Werten sondern automatisch da wir auch responsive Design anwenden sollen - wenigstens ein klein wenig zumindest.

Nun schaffe ich es aber maximal die Abstände zwischen den Bildern mit margin einzustellen, dass diese sich automatisch verteilen funktioniert nicht wirklich, auch nicht mit auto.

Hier der Code der bisherigen Klasse für die Bilder:

.BildStartseite{
    width:150px;
    margin-left:2%;
    margin-right:2%;
}

vielleicht könnt ihr mir da ja helfen. Danke im voraus! :)

...zum Beitrag

CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

Hallo. Irgendwie geht die text-decoration bei mir nicht weg. Bitte helft mir.

HTML:

 <button class="cn"><a href="#">create</a></button>

CSS:

.cn {
  text-decoration: none;
  width: 160px;
  height: 40px;
  background: #23002f;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s ease;
  margin-left: 350px;
  margin-top: 5px;
}

...zum Beitrag

wie findet ihr mein login feld?

habe ein kleines login feld gemacht und später kommt noch python dazu

code html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</header>

<main>

<h1 class="h1" >login</h1>

<h4> <a href="#">Password vergessen?</a></h4>

</form>

</div>

</main>

</footer>

</body>

</html>

css

body {

float: inline-start;

margin-top: 15%;

}

h1 {

font-family: sans-serif;

color: darkblue;

}

#Anmeldefeld {

display: flex;

align-items: center;

justify-content: center;

box-shadow: 20px 20px 10px gray;

border-style: solid;

}

...zum Beitrag

External css funktioniert nicht?

Wenn ich das css in ein styletag mache funktioniert es aber sobald es in der css datei ist funktioniert es nicht mehr

.form {
    margin-top: 10px;
}
.input-field {
    margin-bottom: 10px;
}

(Mit css datei)

(Mit style tag)

...zum Beitrag

Icon größe ändern PHP und CSS Wordpress?

Hallo,

ich möchte gern die Icon Größe bearbeiten. Das icon ist hierbei "fa-phone"

Ich habe eine php Datei und ein Style.css sheet. Wie genau mache ich das? Ich bin eig. Java entwickler und habe mit CSS und PHP leider nichts am Hut.

Hier der php Code Abschnitt:

            <div class="col-lg-3 col-md-6 contact-details">
              <div class="row">
                <?php if( get_theme_mod( 'sayara_automotive_contact_head','' ) != '' || get_theme_mod( 'sayara_automotive_contact','' ) != '') { ?>
                  <div class="col-lg-2 col-md-2">
                    <i class="fa fa-phone"></i>
                  </div>
                  <div class="col-lg-10 col-md-10">
                    <p class="top-head"><?php echo esc_html( get_theme_mod('sayara_automotive_contact_head','' )); ?></p>
                    <p><?php echo esc_html( get_theme_mod('sayara_automotive_contact','' )); ?></p>
                  </div>
                <?php }?>
              </div>
            </div>

Wie genau hängt das Style.css mit dem zusammen?

LG
Niklas

...zum Beitrag

[HTML|CSS] <Datalist> größe ändern?

Ist es überhaupt möglich die Eigenschaften (zb Size) einer <Datalist> zu ändern?

HTML:

<datalist id="users" class="dle" >
    ...
</datalist>

CSS:

.dle{
    padding: 3px 4px;
    width: 91px;
    font-size: 15px;
}

Leider passiert da rein gar nichts.

Mit <Input> Feldern und anderen klappt es aber.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen