Tips on centering font-awesome icons on a webpage

How can I align the icons in a row with center alignment?

Here is the fiddle

.ft-foot {
    float: left;
    width: 100%;
    padding: 3px 10px;
    background: #000;
}
.inclusion {
  color: white;
  padding: 5px 0 10px 0;
  display: block;
  letter-spacing: 1px;
  text-align: center;
}

.inclusion span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}

.inclusion i {
  font-size: 30px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ft-foot">
  <ul>
    <li><a class="inclusion"><i class="fa fa-male" aria-hidden="true"></i><span>Guide</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-car" aria-hidden="true"></i><span>Site seeing</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-building-o" aria-hidden="true"></i><span>Hotels</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-plane" aria-hidden="true"></i><span>Transportation</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-cutlery" aria-hidden="true"></i><span>Food</span></a>
    </li>
  </ul>
</div>
htmlcss

Answer №1

To make the list items display inline-block, add the following CSS rule to the li element:

.ft-foot {
    float: left;
    width: 100%;
    padding: 3px 10px;
    background: #000;
    text-align:center;
}
.ft-foot ul li {
  display: inline-block;
  margin:0 10px;
}
.inclusion {
  color: white;
  padding: 5px 0 10px 0;
  display: block;
  letter-spacing: 1px;
  text-align: center;
}
.inclusion span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ft-foot">
  <ul>
    <li><a class="inclusion"><i class="fa fa-male" aria-hidden="true"></i><span>Guide</span></a></li>
    <li><a class="inclusion"><i class="fa fa-car" aria-hidden="true"></i><span>Site seeing</span></a></li>
    <li><a class="inclusion"><i class="fa fa-building-o" aria-hidden="true"></i><span>Hotels</span></a></li>
    <li><a class="inclusion"><i class="fa fa-plane" aria-hidden="true"></i><span>Transportation</span></a></li>
    <li><a class="inclusion"><i class="fa fa-cutlery" aria-hidden="true"></i><span>Food</span></a></li>
  </ul>
</div>

Answer №2

Include the CSS property display: inline-block for the li elements and apply text-align: center to the ul parent element. Check out the example on Fiddle: http://jsfiddle.net/wemsm7me/

Answer №3

For the ul, add text-align:center and for the li, add display: inline-block.

.ft-foot {
    float: left;
    width: 100%;
    padding: 3px 10px;
    background: #000;
}
.inclusion {
  color: white;
  padding: 5px 0 10px 0;
  display: block;
  letter-spacing: 1px;
  text-align: center;
}

.inclusion span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}

.inclusion i {
  font-size: 30px;
}
li {
  display: inline-block;
}
ul {
  text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ft-foot">
  <ul>
    <li><a class="inclusion"><i class="fa fa-male" aria-hidden="true"></i><span>Guide</span></a></li>
    <li><a class="inclusion"><i class="fa fa-car" aria-hidden="true"></i><span>Site seeing</span></a></li>
    <li><a class="inclusion"><i class="fa fa-building-o" aria-hidden="true"></i><span>Hotels</span></a></li>
    <li><a class="inclusion"><i class="fa fa-plane" aria-hidden="true"></i><span>Transportation</span></a></li>
    <li><a class="inclusion"><i class="fa fa-cutlery" aria-hidden="true"></i><span>Food</span></a></li>
  </ul>
</div>

Answer №4

.ft-footer {
    float: right;
    width: 100%;
    padding: 5px 12px;
    background: #333;
}
.addition {
  color: black;
  display: inline-block;
  letter-spacing: 1.2px;
  text-align: center;
}

.addition span {
  display: inline-block;
  font-size: 12px;
  text-transform: capitalize;
}

.addition i {
  font-size: 25px;
}
.ft-footer ul{
    padding: 0;
    width: 100%;
    display: flex;
    list-style: none;
}
.ft-footer ul li {
    width: 15%;
    float: left;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating interactive HTML buttons using JavaScript to trigger AJAX requests

My current task involves populating an HTML table to showcase users. By making API calls to retrieve user data, I utilize Javascript to add rows to the table. Each row ends with a delete button, intended to trigger a $put request to a separate API endpoint ...

javascriptjqueryhtmlajax

Troubleshooting issue: Inability to assign classes to child elements within divs of a designated class

Currently, I am facing an issue while attempting to insert divs into multiple divs that share a common class called ".description". My goal is to assign a unique class to each internal div, but for some reason, this only seems to work for the first div w ...

javascriptjqueryhtmlcss

Tips on enabling the search bar to accept input and navigate to a new page

Currently, I am working on implementing a search box that redirects the user to a specific page based on their input. However, no matter what I try, it seems that when an input is provided, nothing happens. Here is the code I have been working with: <! ...

javascripthtmlforms

What is the reason that setting margin to 0 auto centers an element, while using margin 1 auto does not have the same effect?

When using margin: 0 auto;, it means that there is a margin size of 0 on the top and bottom of the element, with the available space being divided equally for the left and right margins. This behavior works as expected in the example below. In contrast, c ...

css

Tips for positioning the text and icon within a tag nestled in a paragraph tag?

Need help aligning text and icons inside paragraph tags on a tag. Here is the HTML code I'm currently using: <div class="application-intro"> <p><a class="btn" href=""><i clas ...

htmlcssbootstrap-4

Only scroll the div if it is not within the visible window

I've been looking at this snippet: The sidebar division is what I'm focusing on right now. I want the div to scroll along as I scroll down the page, but I need it to stop scrolling when its bottom is in view. The same should apply when scrollin ...

javascriptjquerycss

I am currently collaborating on the Bootstrap5 project and, in order to accurately incorporate the data, I must align the calendar with the design specifications outlined

Currently, I am working on a project using Bootstrap5 and I need to adjust the calendar to match the design in Figma. At the moment, my calendar looks like this: https://i.sstatic.net/MBuKVbVpm.jpg However, I want it to look like the second image that I ...

htmlcssbootstrap-5

What is the best way to conceal a nested element if its parent's width is set to

I am attempting to dynamically hide a nested paragraph tag based on its parent's width. I want the nested p tag to adjust its visibility as the parent's width changes, either expanding or contracting. I believe there is a simple solution for this ...

javascriptjquerycss

Difficulty enforcing mandatory checkboxes

Seeking assistance on making checkboxes required. I am creating a form using bootstrap 4 and validating it using the JS example from bootstrap documentation. I have added "novalidate" to the form, "required" to inputs, and included the following script: ...

javascriptjqueryhtmlcssbootstrap-4

Tips for adjusting UI size in CSS based on viewport dimensions and accommodating image content

https://i.sstatic.net/DMU5s.jpg The elements E1, E2, E3, E4 are all part of the user interface (UI) and are intended to have a hover effect. Additionally, there is a background image included in the design. Currently, this is the progress made on the pro ...

htmlcss

Adjust the height of CSS Grid rows dynamically

I'm currently working on a CSS Grid layout, and I've encountered an issue with the "auto" value for row height sizing. Despite having small content that should allow them to shrink, the items are maintaining a minimum height of 1fr. For better ...

csscss-grid

The menu does not adjust to fit the site properly, causing the video/photos to appear off to the right on smaller screens

Earlier, I received some fantastic help for which I am extremely grateful. However, I find myself in need of your expert assistance once again. The website I am currently working on is . After simplifying the code and removing absolute positioning, I enco ...

csshtmlscale

Showcase your skills in CSS, HTML, and Javascript

I attempted to search for something similar but came up empty-handed. I have two buttons. When I click one of them, I want to hide a certain division, but it's not working as expected. The divs d2 and d3 are initially hidden when the page opens, whic ...

javascripthtmlcss

The concept of recursion in AngularJS directives

I developed a unique custom directive. angular.module('menu',[]) .directive('MenuDirective',function(){ return{ restrict:'E', replace:'true', scope:{ m ...

javascripthtmlangularjs

JavaScript does not display checkbox values

I am currently testing whether checkbox values appear on the client side. When I execute the code, the alert is not showing anything. I would greatly appreciate any assistance, thank you. <div> <label name="finishing"class=" ...

javascripthtmljquery

HTML does not support the display of characters by unicode

Attempting to retrieve the Unicode of the " ...

javascripthtmlunicode

sound not functioning on iPad

<audio id="example" controls="controls"> <source src="1.mp3" type="audio/mpeg" /> <source src="1.ogg" type="audio/ogg" /> </audio> JavaScript code to automatically play video when the page loads document.getElementById(&ap ...

javascriptipadhtmlaudio

Updating the background color and adjusting the main content background on a WordPress site

After spending nearly an hour searching for a solution to my problem with no luck, I've come to the conclusion that most YouTube videos are not helpful at all. My website is built on WordPress and I am attempting to change the background color and mai ...

javascripthtmlcsswordpress

Is there anyone who can take a shot at creating this calendar widget using HTML/CSS? I'm struggling to code it myself

I have been assigned a task to create a calendar widget using HTML and CSS, but I'm struggling to figure out the structure with tables or divs. Here is my design for the calendar: Here is how I've attempted to design it so far: You can view the ...

htmlcsscalendarprojecttabular

Unable to utilize the full column space provided by bootstrap

I need assistance in making three buttons span the entire width of a column. The grid consists of 3 sections for the buttons and 9 sections for other components. Here's a visual reference. Essentially, the buttons should take up the space highlighte ...

htmlcssreactjsbootstrap-4material-ui