What is the best way to insert a line break following a font awesome icon within a list?

My goal is to design a menu similar to LinkedIn's, featuring buttons made from icons positioned above text. However, I'm facing difficulty in inserting line breaks in CSS format after my FontAwesome icons. Despite having 'display:block' in '#sidebar nav ul li', the desired outcome is not achieved. I even attempted using '
' as 'content' after the icon, but it didn't work as expected.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
}
 html {
     box-sizing: border-box;
}
 *, *:before, *:after {
     box-sizing: inherit;
}
 body, input, select, textarea {
     color: rgba(0, 0, 0, 0.55);
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16.5pt;
     font-weight: normal;
     line-height: 1.5;
}
 .icon {
     text-decoration: none;
     border-bottom: none;
     margin-right: 5px;
     position: relative;
     color: rgba(0, 0, 0, 0.55);
}
 .icon:before {
     font-size: 1.75em;
     font-style: normal;
     text-transform: none !important;
}
 ul.icons {
     cursor: default;
     list-style: none;
     padding-left: 0;
}
 ul.icons li {
     display: inline-block;
     padding: 0 0.75em 0 0;
}
 ul.icons li:last-child {
     padding-right: 0;
}
 ul.icons li > a, ul.icons li > span {
     border: 0;
     text-decoration: none;
}
 ul.icons li > a:before, ul.icons li > span:before {
     font-family: FontAwesome;
     font-style: normal;
     font-weight: normal;
     text-transform: none !important;
}
 ul.icons li > a .label, ul.icons li > span .label {
     display: none;
}
 ul.menu {
     list-style: none;
     padding: 0;
}
 ul.menu > li {
     border-left: solid 1px rgba(0, 0, 0, 0.5);
     display: inline-block;
     line-height: 1;
     margin-left: 1.5em;
     padding: 0 0 0 1.5em;
}
 ul.menu > li:first-child {
     border-left: 0;
     margin: 0;
     padding-left: 0;
}
 @media screen and (max-width: 480px) {
     ul.menu > li {
         border-left: 0;
         display: block;
         line-height: inherit;
         margin: 0.5em 0 0 0;
         padding-left: 0;
    }
}
 #sidebar {
     padding: 2.5em 2.5em 0.5em 2.5em ;
     background: #ffffff;
     border-right: 1px solid black;
     cursor: default;
     height: 100vh;
     left: 0;
     overflow-x: hidden;
     overflow-y: auto;
     position: fixed;
     text-align: right;
     top: 0;
     width: 18em;
     z-index: 10000;
}
 #sidebar > .inner {
     display: flex;
     flex-direction: column;
     justify-content: center;
     min-height: 100%;
     opacity: 1;
     width: 100%;
}
 body.is-ie #sidebar > .inner {
     height: 100%;
}
 #sidebar nav > ul {
     list-style: none;
     padding: 0;
     white-space: pre: 
}
 #sidebar nav > ul > li {
     margin: 1.5em 0 0 0;
     opacity: 1;
     padding: 0;
     position: relative;
}
 #sidebar nav a {
     border: 0;
     color: rgba(0, 0, 0, 0.35);
     display: block;
     font-size: 0.6em;
     font-weight: bold;
     letter-spacing: 0.25em;
     line-height: 1.75;
     outline: 0;
     padding: 1.35em 0;
     position: relative;
     text-decoration: none;
     text-transform: uppercase;
}
 #sidebar nav a:before, #sidebar nav a:after {
     border-radius: 0.2em;
     bottom: 0;
     content: '';
     height: 0.3em;
     position: absolute;
     right: 0;
     width: 100%;
}
 #sidebar nav a:before {
     background: rgb(0, 0, 0, 0.5);
}
 #sidebar nav a:after {
     background-image: -moz-linear-gradient(to right, #003085, #029bde);
     background-image: -webkit-linear-gradient(to right, #003085, #029bde);
     background-image: -ms-linear-gradient(to right, #003085, #029bde);
     background-image: linear-gradient(to right, #003085, #029bde);
     max-width: 0;
}
 #sidebar nav a:hover {
     color: rgba(0, 0, 0, 0.55);
}
 #sidebar nav a.active {
     color: #4267b2;
}
 #sidebar nav a.active:after {
     max-width: 100%;
}
 #sidebar nav a.active span {
     color: #4267b2;
}
 @media screen and (max-width: 1280px) {
     #sidebar {
         border-right: 0px;
         border-bottom: 1px solid black;
         height: 3.5em;
         left: 0;
         line-height: 3.5em;
         overflow: hidden;
         padding:
         text-align: center;
         top: 0;
         width: 100%;
    }
     #sidebar > .inner {
         flex-direction: row;
         align-items: stretch;
         height: inherit;
         line-height: inherit;
    }
     #sidebar nav {
         height: inherit;
         line-height: inherit;
    }
     #sidebar nav ul {
         display: -moz-flex;
         display: -webkit-flex;
         display: -ms-flex;
         display: flex;
         height: inherit;
         line-height: inherit;
         margin: 0;
    }
     #sidebar nav ul li {
         display: block;
         height: inherit;
         line-height: inherit;
         margin: 0 0 0 2em;
         padding: 0;
    }
     #sidebar nav a {
         height: inherit;
         line-height: 2em;
    }
     #sidebar nav a:after {
         background-image: none;
         background-color: #4267b2;
    }
     #sidebar nav span:after {
         content: "</br>";
    }
}
<!DOCTYPE HTML>
<html>
<head>
<title>LinkedIn like menu</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main2.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" />
</head>
<body>

<section id="sidebar">
<div class="inner">
<nav>
<ul>
<li><a href="#home"><span class="icon fas fa-user"></span>Home</a></li>
<li><a href="#about"><span class="icon fas fa-search"></span>About</a></li>
<li><a href="#contact"><span class="icon fas fa-phone"></span>Contact</a></li>
</ul>
</nav>
</div>
</section>

<script src="assets/js/main.js"></script>
</body>
</html>

htmlcssresponsive-design

Answer №1

If this is your desired outcome.

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
input,
select,
textarea {
  color: rgba(0, 0, 0, 0.55);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16.5pt;
  font-weight: normal;
  line-height: 1.5;
}

.icon {
  text-decoration: none;
  border-bottom: none;
  margin-right: 5px;
  position: relative;
  color: rgba(0, 0, 0, 0.55);
}

.icon:before {
  font-size: 1.75em;
  font-style: normal;
  text-transform: none !important;
}

ul.icons {
  cursor: default;
  list-style: none;
  padding-left: 0;
}

ul.icons li {
  display: inline-block;
  padding: 0 0.75em 0 0;
}

ul.icons li:last-child {
  padding-right: 0;
}

ul.icons li>a,
ul.icons li>span {
  border: 0;
  text-decoration: none;
}

ul.icons li>a:before,
ul.icons li>span:before {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

ul.icons li>a .label,
ul.icons li>span .label {
  display: none;
}

ul.menu {
  list-style: none;
  padding: 0;
}

ul.menu>li {
  border-left: solid 1px rgba(0, 0, 0, 0.5);
  display: inline-block;
  line-height: 1;
  margin-left: 1.5em;
  padding: 0 0 0 1.5em;
}

ul.menu>li:first-child {
  border-left: 0;
  margin: 0;
  padding-left: 0;
}

@media screen and (max-width: 480px) {
  ul.menu>li {
    border-left: 0;
    display: block;
    line-height: inherit;
    margin: 0.5em 0 0 0;
    padding-left: 0;
  }
}

#sidebar {
  padding: 2.5em 2.5em 0.5em 2.5em;
  background: #ffffff;
  border-right: 1px solid black;
  cursor: default;
  height: 100vh;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  text-align: right;
  top: 0;
  width: 18em;
  z-index: 10000;
}

#sidebar>.inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  opacity: 1;
  width: 100%;
}

body.is-ie #sidebar>.inner {
  height: 100%;
}

#sidebar nav>ul {
  list-style: none;
  padding: 0;
  white-space: pre:
}

#sidebar nav>ul>li {
  margin: 1.5em 0 0 0;
  opacity: 1;
  padding: 0;
  position: relative;
}

#sidebar nav a {
  border: 0;
  color: rgba(0, 0, 0, 0.35);
  display: block;
  font-size: 0.6em;
  font-weight: bold;
  letter-spacing: 0.25em;
  line-height: 1.75;
  outline: 0;
  padding: 1.35em 0;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
}

#sidebar nav a:before,
#sidebar nav a:after {
  border-radius: 0.2em;
  bottom: 0;
  content: '';
  height: 0.3em;
  position: absolute;
  right: 0;
  width: 100%;
}

#sidebar nav a:before {
  background: rgb(0, 0, 0, 0.5);
}

#sidebar nav a:after {
  background-image: -moz-linear-gradient(to right, #003085, #029bde);
  background-image: -webkit-linear-gradient(to right, #003085, #029bde);
  background-image: -ms-linear-gradient(to right, #003085, #029bde);
  background-image: linear-gradient(to right, #003085, #029bde);
  max-width: 0;
}

#sidebar nav a:hover {
  color: rgba(0, 0, 0, 0.55);
}

#sidebar nav a.active {
  color: #4267b2;
}

#sidebar nav a.active:after {
  max-width: 100%;
}

#sidebar nav a.active span {
  color: #4267b2;
}

span.icon {
  display: block;
}

@media screen and (max-width: 1280px) {
  #sidebar {
    border-right: 0px;
    border-bottom: 1px solid black;
    height: 3.5em;
    left: 0;
    line-height: 3.5em;
    overflow: hidden;
    padding: 0;
    text-align: center;
    top: 0;
    width: 100%;
  }
  #sidebar>.inner {
    flex-direction: row;
    align-items: stretch;
    height: inherit;
    line-height: inherit;
  }
  #sidebar nav {
    height: inherit;
    line-height: inherit;
  }
  #sidebar nav ul {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    height: inherit;
    line-height: inherit;
    margin: 0;
  }
  #sidebar nav ul li {
    display: block;
    height: inherit;
    line-height: inherit;
    margin: 0 0 0 2em;
    padding: 0;
  }
  #sidebar nav a {
    height: inherit;
    line-height: 2em;
  }
  #sidebar nav a:after {
    background-image: none;
    background-color: #4267b2;
  }
}
<!DOCTYPE HTML>
<html>

<head>
  <title>LinkedIn like menu</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="assets/css/main2.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" />
</head>

<body>

  <section id="sidebar">
    <div class="inner">
      <nav>
        <ul>
          <li><a href="#home"><span class="icon fas fa-user"></span>Home</a></li>
          <li><a href="#about"><span class="icon fas fa-search"></span>About</a></li>
          <li><a href="#contact"><span class="icon fas fa-phone"></span>Contact</a></li>
        </ul>
      </nav>
    </div>
  </section>

  <script src="assets/js/main.js"></script>
</body>

</html>

Answer №2

Simply enclose the home and other texts within a div element, and they will be automatically formatted for easy viewing.

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

Steps for identifying the file format of a document with JavaScript

Can someone assist me in determining a file type using JavaScript within the context of this HTML code? <div class="indi-download"> <div class="pull-left"> <h6 class="file-format">%file_display_name%</h6> </div> <div c ...

javascripthtml

Why @font-face doesn't display on older versions of Internet Explorer like IE 7 and IE

Our website has the following CSS code. The use of a smiley face is to ensure compatibility with IE 7 and IE 8. However, while the site's fonts display correctly on IE 9, Chrome, Firefox, etc., there seems to be an issue with IE 7 and 8. @font-face { ...

cssfonts

Disappearing Bootstrap 3 Dropdown Issue Caused by Tab Click

There is an issue with the drop-down menu I created: When I click on tabs like ALL or FILM, it closes all elements. To reopen, I have to click again on the button PRODUCT.dropdown-toggle. The code example looks like this: var App = function () { ...

javascriptjqueryhtmlcsstwitter-bootstrap

Incorporating styling preferences within a directive's template

One of the directives I am currently working on looks like this: app.directive('MessageChild', function($timeout) { return { restrict: 'E', scope: { pos: '=?', msg: '=' ...

cssangularjsangular-directive

Error: Unable to locate module '@material/core/Grid'

After cloning a repository that is built with MUI, I noticed that certain components were already imported and working seamlessly. These components include: import Card from '@mui/material/Card' import CardActions from '@mui/material/CardAct ...

htmlnpmmaterial-ui

What could be the source of this margin or spacing?

Within this test, I have noticed that there are 2 inline flex containers. Specifically, I am referring to the test scenario that states Next The flex containers are laid out inline. Despite the fact that there is some space between the containers, upon in ...

htmlcssflexbox

I am having trouble with json_encode in my Symfony2 controller

Just starting out with Symfony2 and AngularJS. Trying to use json_encode to display content from my database, but running into issues. Here's my controller: public function catalogonewAction() { $data = $this->getDoctrine()->getManager() ...

phphtmlangularjssymfony

pressing the enter key to submit form

Searching for videos is presenting a challenge for me when I try to submit the search form by pressing enter, but everything works fine when I click the button. After clicking, the text gets cleared and the /search page loads with the search index displa ...

javascripthtmlreact-redux

The information retrieved from the database query is failing to appear on my webpage

I am encountering an issue where I am unable to display product details on my webpage in a specific format after submitting an ID number through a form. The query does not show any data when submitted. My objective is to append the latest retrieved data be ...

javascriptphphtmlmysqlajax

Creating a mechanism that fetches web links and automatically substitutes the URL with the corresponding title of the webpage

Just the other day, I noticed that putting a link in my profile resulted in it being replaced by the exact title of the question. This got me thinking, how exactly do they accomplish this? My hunch is that they achieve this by using ajax to send the link ...

phphtmlajax

What is the method for turning off Bootstrap for viewport width below a specific threshold?

I'm currently utilizing bootstrap for my website design. However, there's a particular CSS rule causing some frustration on one specific page: @media (min-width: 576px) .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-w ...

htmlcsstwitter-bootstrap

Modifying JavaScript using JavaScript

I'm looking for a solution to change the URL of a button in sync with the iframe displayed on the screen using JavaScript. The challenge I'm facing is figuring out how to dynamically update the button's URL based on the iframe content. Here ...

javascripthtml

Applying CSS to inherit styles

I have a group of divs with a similar style, but each one has different padding and margin settings. Here is an example: <div class="mainStyle" id="cc">CC</div> <div class="mainStyle" id="bb">BB</div> <div class="mainStyle" id=" ...

css

Error in JQuery Document Ready AJAX function causing image to not load initially without a page refresh

Currently, I have a piece of customized code that extracts data from an XML file and uses this data to populate specific content on my webpage: $(document).ready(function() { $.ajax({ type: 'GET', url: 'config.xml?date=& ...

jqueryhtmlajaxxml

My divs seem to overlap in strange, unpredictable ways depending on the zoom level - it's an odd phenomenon that occurs

This situation is causing me frustration... depending on the zoom level of the browser, my boxes do not align properly and it ends up looking messy (in all browsers). Any advice? Could I handle this more effectively with jQuery? HTML </div> <div ...

csshtmlzoomingfadeout

Scaled-down navigation when scrolling

Is there a way to make the navigation bar shrink when scrolling, similar to how it functions on this website? The transition on this site is so seamless. I'm guessing it's achieved with JQuery. ...

jqueryhtmlcss

What are the best ways to customize exported and slotted components in Svelte?

Is there a similarity between Svelte slots and vanilla-js/dom functionality (I'm having trouble with it). In html/js, I can achieve the following: <style> body {color: red;} /* style exposed part from outside */ my-element::par ...

javascripthtmlsvelte

The removal of the div element doesn't seem to be functioning properly

I am struggling with adding and removing div elements using jQuery. While adding a div element is working fine, I am facing issues with removing a div element. Here is the implementation: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

jqueryhtml

Enhance your message inbox experience with jQuery/Javascript features inspired by Gmail, including the ability to select all messages with a checkbox and

It is truly satisfying to be here working on developing a private message inbox for my website, especially after successfully implementing a complete user signup/login and activation system. A few months ago, I never believed I had enough patience to grasp ...

phpjavascriptjquerymysqlhtml

Tips for keeping the header section anchored to the top of the page

I am having trouble getting the menu bar and logo to stick at the top of my header section in the template. I have been trying different solutions, including using the sticky.js plugin for almost 4 days now but it's not working. I also have parallax e ...

javascriptjqueryhtmlcss