CODEWITHSUNDEEP
htmlcssfrontendicons
FNico
FNico

Reputation: 21

How to make a horizontal icon list in html/css?

I have a big html project due at work and I just have to add one final touch. I am trying to create a horizontal icon list on my page but have been running into issues. Here is a picture of EXACTLY what I need to create. please point me in the right direction or send over some code to try. Thanks

I have the .SVG files of the icons also. they aren't links to the internet, please keep that in mind.

Upvotes: 0

Views: 1814

Answers (2)

Lauro Müller
Lauro Müller

Reputation: 174

Here is a (very) basic implementation of how to use flexbox to create this three-column effect. Each individual cell will grow/shrink to equally fill the available width. Of course this needs some fine-tuning, but I hope it at least gives you a good starting point :)

.flex-container {
  display: flex;
  height: 100px;
  width: 100%;
  background-color: #00ff00;
  justify-content: space-between; /* could also try with space-around */
}

.flex-child {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  background-color: #ff0000;
  height: calc(100% - 20px); /* for demonstration purposes, subtracts top and bottom margin from height */
  margin: 10px; /* for demonstration purposes */
}
<div class="flex-container">
  <div class="flex-child">
    Content here
  </div>
  <div class="flex-child">
    Content here
  </div>
  <div class="flex-child">
    Content here
  </div>
</div>

Upvotes: 1

Co Pham
Co Pham

Reputation: 361

What issues have you been running into?
It just a big flex container that contains 3 small flex containers.
In each small container, you will need 3 divs, the first div also flex, contain an icon and a text.

Upvotes: 0

Related Questions