CODEWITHSUNDEEP
htmlcssfont-awesome-5
altos
altos

Reputation: 35

HTML5, CSS: Make FA icon and link break correctly on mobile

When the first line breaks in mobile, I want to start let the second line start from where the first begins. Any ideas how to reach this on a list?

Codepen: https://codepen.io/altos/pen/KoKEba

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <ul>
    <li>
      <a href="#">
        <i class="fa fa-download">     </i>
        <span class="file-title">Link 1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr     </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-download">     </i>
        <span class="file-title">Link 2 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr     </span>
      </a>
    </li>
  </ul>
</body>

Upvotes: 0

Views: 119

Answers (2)

Rob Monhemius
Rob Monhemius

Reputation: 5144

The cleanest way to achieve what you want is by using:

li{
list-style-image: url('/my-image')
}

But this would mean you need to have the image you need accessible on your server.

Another way would be: 

.fa-download{
  position: absolute;
  margin-left: -1.5em;
}
ul{
  list-style-type: none;
}
a:hover{
  color: red;
}
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <ul>
    <li>
      <a href="#">
        <i class="fa fa-download">     </i>
        <span class="file-title">Link 1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr     </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-download">     </i>
        <span class="file-title">Link 2 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr     </span>
      </a>
    </li>
  </ul>
</body>

using the second approach:

  • remove the list-style-type.
  • use the padding of the list to place the element
  • the <i class="fa fa-download"></i> is at the start of your line.
  • use position: absolute and margin: -1.5em to move the icon in the padding area of the list

Upvotes: 0

Athul Nath
Athul Nath

Reputation: 2606

Give display properties to a to break on same line

ul li a {
    display: flex;
}

Upvotes: 1

Related Questions