font awesome issue placing text under icons

» css » font awesome issue placing text under icons

By : masndik

Date : December 01 2020, 05:00 PM

like below fixes the issue How about this. I'm not sure why you had different styles for the two s, so I had to remove those (they didn't match up with your original screenshots anyway). Also, I didn't feel like including the actual FontAwsome in this post, so I faked it a bit.
Anyway, you get the idea; inline-block for the

s and the s, block for the s.
code :
.fa.fa-plus-circle::before { content: '⊕'; } .fa.fa-binoculars::before { content: '⛘'; } .fa.fa-5x { font-size: 5em; } .fa.fa-border { border: .1em solid; border-radius: .1em } div { display: inline-block; } a { text-decoration: none; text-align: center; display: inline-block; } a i.fa { display: block; font-style: normal; text-align: center; }
<br/> <br/> <br/> <div id="addTradingOutageBtnWrap"> <a id="addTradingOutageBtn" href="addTradingOutage.action"> <i class="fa fa-plus-circle fa-5x fa-pull-left fa-border"></i> Add </a> </div> <div id="viewTradingOutageBtnWrap"> <a id="viewTradingOutageBtn" href="viewTradingOutage"> <i class="fa fa-binoculars fa-5x fa-pull-left fa-border"></i> View </a> </div> </div>

Share :

Issue with drawing borders CSS font awesome icons

By : Anurag Malik

Date : March 29 2020, 07:55 AM

hope this fix your issue i am using css awesome font icons (https://fortawesome.github.io/Font-Awesome/) and i am trying to draw circle or square borders around them using css rules. , Please run the code snippet below,

code :

.border-circle {  color: #b0b0b0; border-radius: 50%;  border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em;  }
.border-square {   color: #b0b0b0;  border-radius:25%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-check-circle fa-3x border-circle"></i>
<i class="fa fa-check-circle fa-3x border-square"></i>
<i class="fa fa-check-square fa-3x border-circle"></i>
<i class="fa fa-check-square fa-3x border-square"></i>

Aligning font awesome icons beside text

By : Lasantha Ranjana

Date : March 29 2020, 07:55 AM

help you fix your problem You can use the Font Awesome Fixed Width Icons (fa-fw) or List Icons (fa-ul + fa-li).

code :

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<p><u><code>fa-fw</code> class</u></p>
<p><span class="fa fa-calendar fa-fw"></span> July 25, 2017</p>
<p><span class="fa fa-map-marker fa-fw"></span> Sample City</p>
<p><span class="fa fa-venus-mars fa-fw"></span> Male</p>
<p><span class="fa fa-envelope fa-fw"></span> sample-email@gmail.com</p>
<p><span class="fa fa-phone fa-fw"></span> +12 34567890</p>

<p><u><code>fa-ul</code> + <code>fa-li</code> class</u></p>
<ul class="fa-ul">
  <li><span class="fa fa-calendar fa-li"></span> July 25, 2017</li>
  <li><span class="fa fa-map-marker fa-li"></span> Sample City</li>
  <li><span class="fa fa-venus-mars fa-li"></span> Male</li>
  <li><span class="fa fa-envelope fa-li"></span> sample-email@gmail.com</li>
  <li><span class="fa fa-phone fa-li"></span> +12 34567890</li>
</ul>

Flutter font awesome text below icons

By : Muhammad Riscky

Date : March 29 2020, 07:55 AM

will help you I am using the font awesome icons in my flutter app and I am trying to place descriptive text below the icons. I was hoping there was a property in the IconButton class for this but dont see one. Here is my code: , I encountered this problem few days ago and here is how I solved it:

code :

Container(
  margin: EdgeInsets.all(25.0),
  child: Column(
    children: <Widget>[
      GestureDetector(
          child: Icon(
            FontAwesomeIcons.checkSquare,
            size: 60.0,
            color: const Color(0xFF0099a9),
          ),
          onTap: () {
            print("Pressed");
          }),
      Text("Some Text")
    ],
  ),
),

Align text to font awesome icons

By : user2207781

Date : March 29 2020, 07:55 AM

seems to work fine You should do the following modifications:
Children in uls should be lis to have a correct HTML, Use fa-fw to set icons at a fixed width, Remove the brs that are no longer necessary,

code :

ul {
  /* Remove the ul default styling */
  list-style: none;
}

li i {
  margin-right: 20px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<div class="row">
  <div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fas fa-snowflake"></i> A/C service</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Aut-gear service</li>
          <li><i class="fa-fw fas fa-car-side"></i> Bil-leasing</li>
          <li><i class="fa-fw fas fa-car"></i> Bil-salg</li>
          <li><i class="fa-fw fas fa-oil-can"></i> Bilsyn</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW Keyreader</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW-testudstyr (ISTA)</li>
          <li><i class="fa-fw fas fa-book"></i> Digital servicebog</li>
          <li><i class="fa-fw fas fa-hotel"></i> Dækhotel</li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Klassiske biler</li>
          <li><i class="fa-fw fas fa-mug-hot"></i> Kundelounge</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Låne/leje-biler</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Skade-reparation</li>
          <li><i class="fa-fw fas fa-code"></i> Software-opdatering & kodning</li>
          <li><i class="fa-fw fas fa-tools"></i> Specialværktøj</li>
        </ul>
      </div>
    </div>
  </div>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<div class="row">
  <div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
      <div class="col-xs-12 col-sm-6">
        <ul class="fa-ul">
          <li><i class="fa-li fa-fw fas fa-snowflake"></i> A/C service</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Aut-gear service</li>
          <li><i class="fa-li fa-fw fas fa-car-side"></i> Bil-leasing</li>
          <li><i class="fa-li fa-fw fas fa-car"></i> Bil-salg</li>
          <li><i class="fa-li fa-fw fas fa-oil-can"></i> Bilsyn</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> BMW Keyreader</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> BMW-testudstyr (ISTA)</li>
          <li><i class="fa-li fa-fw fas fa-book"></i> Digital servicebog</li>
          <li><i class="fa-li fa-fw fas fa-hotel"></i> Dækhotel</li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6">
        <ul class="fa-ul">
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Klassiske biler</li>
          <li><i class="fa-li fa-fw fas fa-mug-hot"></i> Kundelounge</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Låne/leje-biler</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Skade-reparation</li>
          <li><i class="fa-li fa-fw fas fa-code"></i> Software-opdatering & kodning</li>
          <li><i class="fa-li fa-fw fas fa-tools"></i> Specialværktøj</li>
        </ul>
      </div>
    </div>
  </div>

Font awesome stacked icons alignment issue on Chrome

By : Brian B

Date : March 29 2020, 07:55 AM

I wish this help you So it appears that the font awesome stack span adds a 2em height, which doesnt both Firefox, but bothers Chrome. Overriding the height to 0em fixed the issue.