How to add text below icons in html css-CodePudding

I wanted to show text below these icons in my website. Can someone guide me how to do it please

<div  style="position: fixed; bottom: 0; width:100%">
  <a href="Dashboard">
    <ion-icon name="home-outline"  onclick="change(this)">
    </ion-icon>Dashboard</a>
  <a href="Profile">
    <ion-icon name="person-outline"  onclick="change(this)">
    </ion-icon>Profile</a>
</div>

CodePudding user response：

The best way to do this, or at least how I do it, is using CSS positioning. Notice that I made each of the text and the button absolute in position, and then positioned them within the outer container.

<div  style="height:100%, width:100%">
  <a href="Dashboard" style="position:absolute, top: 30%, left: 30%">Dashboard</a>
  <a style="position: absolute, top: 40%, left:30%"><ion-icon name="home-outline"  onclick="change(this)"></ion-icon></a>
  <a href="Profile" style="position:absolute, top:30%, right:30%">Profile</a>
  <a style="position:absolute, top: 40%, right:30%"><ion-icon name="person-outline"  onclick="change(this)"></ion-icon></a>
</div>

Hope this helps!

CodePudding user response：

Using flex and direction is the solution. Note that I've used fontawesome icons here. You can replace them.

.link-item {
  display: flex;
  flex-direction: column;
  align-items: center
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div  style="position: fixed; bottom: 0; width:100%">
  <a  href="Dashboard">
    <i ></i>
    <span>Dashboard</span>
  </a>
  <a  href="Profile">
    <i ></i>
    <span>Profile</span>
  </a>
</div>

CodePudding user response：

You could do something like this. Wrap each pair of a, ion-icon, and text in an ion-item and then within that add an ion-label. I also added a div around the text in each a tag. Maybe you just needed that.

<div  style="position: fixed; bottom: 0; width:100%">
  <ion-item slot="start">
    <ion-label>
      <a href="Dashboard">
        <ion-icon
          name="home-outline"
          
          onclick="change(this)"
        ></ion-icon>
        <div>Dashboard</div>
      </a>
    </ion-label>
  </ion-item>
  <ion-item>
    <a href="Profile">
      <ion-label>
        <ion-icon
          name="person-outline"
          
          onclick="change(this)"
        ></ion-icon>
        <div>Profile</div>
      </ion-label> </a
    >.
  </ion-item>
</div>

CodePudding user response：

you can use with css ::after to put text below the icons just change a little bit of the code to work

.icon{
    position:relative;
    margin:0px 20px;
}

.icon::after{
    content:attr("data-name");
    position:absolute;
    top:100%;
    left:0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<div>
  <a href="Dashboard">
    <i  name="home-outline" data-name="DashBoard"onclick="change(this)">
    </i></a>
  <a href="Profile">
    <i  name="person-outline" data-name="Profile">
    </i></a>
</div>