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

Question

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>

I don t get what you want to achieve. Are you trying to overlap the two links? What have you tried so far? — Rob Monhemius, Mar 09 '18 at 10:47
See attached image, maybe this clears the questions https://imgur.com/a/cbh8H — altos, Mar 09 '18 at 11:05

Athul Nath · Accepted Answer · 2018-03-09T11:29:00.363

1

Give display properties to a to break on same line

ul li a {
    display: flex;
}

edited Mar 09 '18 at 11:29

answered Mar 09 '18 at 10:45

Athul Nath

2,536
1
15
27

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – rollstuhlfahrer Mar 09 '18 at 11:06
Sadly not. See attached image, maybe this clears the questions imgur.com/a/cbh8H – altos Mar 09 '18 at 11:06
@Anuresh You are right! But now I have a really big gap between the links. How to fix that? – altos Mar 09 '18 at 11:17
Oh right, it works there. At my test page I still had a css. Thank you!! – altos Mar 09 '18 at 11:26

Rob Monhemius · Answer 2 · 2018-03-09T11:42:43.410

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

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

2 Answers2