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

4 Antworten

germanils

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

25.03.2022, 10:51

Suche mal nac".fa" bzw. ".fa-phone" in dem Stylesheet.

Da müsste die Größe definiert sein.

Du kannst aber auch vordefinierte Größen verwenden:

https://fontawesome.com/v4/examples/

Woher ich das weiß:Berufserfahrung – Entwicklung von Apps und Websites

DZNRandom

Fragesteller

25.03.2022, 11:55

.fa-chevron-circle-right {

margin-right: 10px;

}

Da kommt leider nur das, nichts bzgl. font size. Kann ich das irgendwie manuell eintragen? Ist das die richtige methode? Bin lost bei css... :D

germanils

25.03.2022, 11:58

@DZNRandom

Die Stile für die Icons stecken vermutlich in der Bootstrap-CSS.

Versuche mal in dem PHP eine der Klassen für die Größe zu ergänzen, also z.B.

<i class="fa fa-phone fa-3x"></i>

Dann sollte es 3mal so groß sein. (Siehe den Link den ich gepostet hatte)

DZNRandom

Fragesteller

28.03.2022, 13:16

@germanils

klappt leider nicht :c

LeBonyt

25.03.2022, 11:21

Wie germanils schon schrieb: Das wird in der CSS festgelegt. Willst Du von den Standardwerten abweichen solltest, du nicht die CSS Datei direkt bearbeiten, sondern mit einer eigenen CSS Datei,die Klasse überschreiben

Woher ich das weiß:Berufserfahrung – Web Developer bei einem mittelständischen Portalbetreiber

tanteerna68

25.03.2022, 10:51

Das wird rein über CSS umgesetzt, denn im CSS wird die Größe definiert sein. Im PHP, bzw. HTML Code wird lediglich angegeben wo das Icon paltziert werden soll.

MooKuh

25.03.2022, 12:08

.Fa-phone {

font-size:16px !important;

}

Versuchs mal damit.

Sonst vllt. Noch "i.fa-phone"

Ähnliche Fragen

wie in Bootstrap 5 vertikal zentrieren?

Der Container ist ganz oben was auch immer man probiert


<div class="container mx-auto">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-header">Header</div>
                    <div class="card-body">Content</div>
                    <div class="card-footer">Footer</div>
                </div>
            </div>
        <div class="col-sm-3"></div>
    </div>

...zur Frage

Wie kann ich einstellen, dass die div-Boxen auf dem Handy untereinander dargestellt werden?

Guten Tag.

Mein Problem ist Folgendes: Auf dem PC werden die Boxen ganz normal und wie gewollt dargestellt, doch auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen. Wie kann ich nun einstellen, dass die div-Boxen untereinander dargestellt werden?

Quellcode:

<?php
  require('templates/header.php');
?>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Kampagnen</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-xs-12">
            <div class="box box-container">
              <div class="row">
                <div class="col-xs-12">
                  <div class="box-first box-container">
                    <div class="row">
                      <div class="col-xs-1">
                        <div class="row">
                          <div class="col-xs">
                            <div class="box-nested" text-align="center">
                              <img src="templates/XXX.png"/>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <strong> XXX </strong>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <h4>
                            <span class="badge badge-pill badge-success">XXX: 1,10€</span>
                            <span class="badge badge-pill badge-secondary">XXX: 1,00€</span>
                          </h4>
                        </div>
                      </div>
                      <div class="col-xs-4">
                        <div class="box-nested">
                          <span>
                            <h4>
                              <font color="#400040">
                                <input name="text" id="myInput" id="text" width="100%;" ?>">
                                <button class="badge badge-pill badge-danger" onclick="myFunction()">Link Kopieren</button>
                              </h4>
                            </font>
                            <script>

                              function myFunction() {
                                var copyText = document.getElementById("myInput");
                                copyText.select();
                                document.execCommand("copy");
                              }
                            </script>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-body all-icons">
          <div class="row">
            <div class="wrap-table100">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
  require('templates/footer.php');
?>

Das CSS, welches zugegebener Weise sehr unübersichtlich ist^^, lautet wie folgt:

https://pastebin.com/hHsGJhFE

...zur Frage

DIV overflow: scroll; automatisch nach unten Scrollen?

Hallo,

ich habe ein Php Skript:

<?php
echo "<div class'eins'>Eins</div>"; 
echo "<div class'zwei'>Zwei</div>";


echo "<div class'output'>Hier <br/>ist <br/>der <br/>overflow: scroll;</div>";

echo "<div></div>";
?>

Den overflow: scroll; definiere ich in CSS.

Jetzt möchte ich, dass automatisch nach ganz unten gescrollt wird, wenn die Seite aufgerufen bzw. neu geladen wird.

Im Internet bin ich auf folgenden Code gestoßen:

<?php
echo '<body onLoad="letzteselement.scrollIntoView();">';

echo "<div class'eins'>Eins</div>"; 
echo "<div class'zwei'>Zwei</div>";


echo "<div class'output'>Hier <br/>ist <br/>der <br/>overflow: scroll; 
<a id="letzteselement" /> 
</div>";

echo "<div></div>";
?>

Bei Firefox funktioniert das auch einwandfrei, wenn ich allerdings einen anderen Browser benutze (z.B. Microsoft Edge) ist es, als ob der Code nicht existier -> es passiert nichts.

(Ich weiß nicht, ob es wichtig ist, aber der Inhalt meines Div wird aus einer Datenbank ausgelesen und ist relativ groß (Text))

Kent jemand noch einen anderen Code, der immer funktioniert?

...zur Frage

PHP: Wie kann ich eine echo-Ausgabe mit CSS formatieren?

Hey,

ich arbeite aktuell an einem PHP-Skript, welches eine zufällige Zeile aus einer Textdatei wiedergibt. Dieses habe ich auch problemlos hinbekommen, aber ich weiß nicht, wie ich das mit CSS formatieren soll. Ich habe bereits in andere Fragen geschaut, aber nur das:

echo '<a class="#account" href="', $value, '">', $value, '</a>'

als Ergebnis bekommen. Das würde auch völlig reichen, wenn ich wüsste, wie ich das in mein PHP-Script integriere.

Das PHP-Skript:

<?php
  $file = file('nordvpn.txt');
  echo $file[array_rand($file)];
?>
<style>
  #account {
    position: absolute;
    left: 0;
    top: 50%;
    padding: 60px;
    width: 100%;
    text-align: center;
  }
</style>

...zur Frage

JavaScript - Erste Schritte, CSS wird blockiert?

Ich bekomme folgenden Error, wenn ich versuche meine ersten Versuche einer Webseite in Firefox zu laden.

Die Ressource von "http://localhost:63342/FirstTest/style.css" wurde wegen eines MIME-Typ-Konfliktes ("text/html") blockiert (X-Content-Type-Options: nosniff)

Das ist der Code von den Datein.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet"href="style.css">
</head>
<body>
    <div class="placeholder">
        I'm in a div!
    </div>
    <div class="anotherClass">
        I'm in another class!
    </div>
</body>
</html>

CSS

.placeholder{
    background-color: red;
}

.anotherClass{
    background-color: lightseagreen;
}

Leider werden nur die div Elemente ausgeben, woran kann es legen? Ich werde aus der Fehlermeldung nicht schlau.

Schöne Grüße

...zur Frage

HTML/PHP/CSS Code funktioniert nicht?

Ich benutze den Code <div class="Box">BOX</div> in einer php Datei und den Code .Box {

background-color: black;

}

in einer css Datei aber bei mir steht dort am ende nur "BOX".

...zur Frage

Bootstrap Column Anordnung ändern (mobile)?

Hallo liebe Community,

ich arbeite gerade an einem Webshop und erstelle die Startseite selbst mit HTML und CSS und dem Bootstrap Grid Layout. Nun habe ich Bilder und Texte welche auf dem Desktop jeweils abwechselnd und untereinander kommen.

Also jeweils Bild und Text in einer "row" und dann entweder der Text oder das Bild als erstes. So ergibt sich in der Reihenfolge: Text-Bild, Bild-Text.

Für die Desktopansicht ist das auch genau so gewünscht, allerdings hätte ich gerne wenn die Columns beim Smartphone untereinander rutschen, dass nicht zwei Bilder nacheinander kommen, sondern: Text-Bild, Text-Bild.

Wie lässt sich das realisieren?

Hier mal ein bisschen Code, sehr reduziert.

Doppelter Content und ein/ausblenden über "hidden" ist für mich nicht möglich aus SEO-Gründen.

Danke :)

  <div class="container">

    <div class="row">
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor.</p>
      </div>
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor sit.</p>
      </div>
    </div>

  </div>

...zur Frage

php passwort überpüfung?

Guten Abend, ich habe eine Html Datei erstellt die eine Loginseite darstellt. Dazu habe ich eine PHP Datei erstellt die das Passwort abfragen soll. Aber wenn ich auf einloggen klicke wird mir nur der Code der PHP angezeigt. Also ich kann mich weder einlogen noch sagt mir die PHP ob das Passwort falsch ist. Was kann ich tun.

Der Html code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="shortcut icon" type="image/x-icon" href="https://www.flaticon.com/premium-icon/icons/svg/2395/2395608.svg" />
<link rel="stylesheet" type="text/css" href="../CSS/global.css">
</head>
<style type="text/css"></style>
<body>
<div class="form-container">
<div id="benutzer-bild"></div>
<center><h2><b>Login</b></h2></center>
<form method="POST" action="loign.php">
Benutzername: <input type="text" name="user"/><br>
Passwort: <input type="password" name="password"/><br>
<input type="submit" value="Einloggen"/>
</form>
</div>
</body>
</html>
der PHP code:
<?php
$user = $_POST['user'];
$password = $_POST['password'];
if ($user=="Admin" && $password==Admin)
{
  header('location:startseite.html');
}
else
{
  echo "dfgdfgfdgdfgdfg";
}
?>

...zur Frage

Bootstrap Layout?

Hallo,

arbeite momentan mit Bootstrap (Blazor) an einer Webseite.

Ich habe in meinem Container 3 Rows, wobei jede Row 3 Card Elemente hat.
Wenn ich nun aber mein Browserfenster kleiner mache verrutscht der Text:

Code:

<div class="container-fluid">


    <div class="row">
        <h3>Suche:</h3>
    </div>


    <div class="row p-2">
        <div class="row">
            <div class="row">
                <h2>Liste</h2>  
                <hr />
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Das Layout passt sich schon an, der innere Text aber nicht warum ?
Liegt es daran das ich ein <p> Tag verwende ?
Wie kann ich in Zukunft sowas verhindern ?

Sollte so aussehen:

...zur Frage

html Unterschrift in die pdf einfügen?

<div class="row">
 <div class="panel">
  <div class="panel-body">
   <div class="col-xs-12">
    <div class="form-group">
     <label for="Unterschrift_1"><b>Unterschrift Fachkraft für Arbeitssicherheit</b></label>
     <div class="wrapper">
      <canvas id="Unterschrift_1" width="700" height="100
      </canvas>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

...zur Frage

Unterschied: section - div? id - class? | Wie lerne ich am besten (HTML,CSS,PHP etc.)?

Hey,

wo liegt eigentlich der unterschied zwischen section - div ? und id - class? ich bitte um eine ausführliche Erklärung die jeder dummie wie ich versteht. Danke ! Desweitern benötige ich tipps, wie ich mir am besten HTML, CSS, PHP, Java usw beibringen kann, sprich am effizientesten ? Denn ich sitze seit über einem Monat vor dem PC und beherrsche lediglich zum Teil die Auszeichnungssprache HTML und die Gestaltungssprache CSS.

Für jede hilfreiche Antwort wäre ich sehr dankbar.

Gruß

...zur Frage

Checkboxen die Pflicht sein soll?

man soll umbedigt eines der Checkboxen auswählen, Bei Bedarf oder Regelmäßig oder Nein.

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Bei_Bedarf)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Bei_Bedarf" value="Ja">{/if} {language key="elf_Frage_11_Bei_Bedarf"}{if !$pdf}</label>{/if}</div>       

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Regelmaessig)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Regelmaessig" value="Ja">{/if} {language key="elf_Frage_11_Regelmaeßig"}{if !$pdf}</label>{/if}</div>

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Nein)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Nein" value="Ja">{/if} {language key="elf_Frage_11_Nein"}{if !$pdf}</label>{/if}</div>

...zur Frage

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zur Frage

style.css (sheet) in einen .php Code einfügen?

wie kann ich mein Style sheet in .css in einen .php Code einfügen? So, dass ich es damit quasi designen kann?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen