A stylish Bootstrap list group featuring large Font Awesome icons

I am working with a Bootstrap 5 List Group element on my webpage. To enhance its visual appeal, I want to include oversized Font Awesome icons.

After some styling and using a span tag, I managed to add the icon successfully. However, the issue I am facing is that the icon is overflowing from the list-group-item boundaries. You can see the problem in the images below:

https://i.sstatic.net/FPEQd.png

https://i.sstatic.net/2tCVa.png

I have attempted to keep the icon within the list-group-item by manipulating the z-index, but it has not proven effective.

I suspect the positioning of the span element might be causing this issue?

.pages-icon {
  font-size: 90px;
  position: absolute;
  right: 0;
  top: -20px;
  transform: rotate(11.81deg);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7875756e696e687b6a5a2f34283429">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="list-group rounded-10">
  <a href="#" class="list-group-item list-group-item-action w-100">
    <span class="pages-icon"><i class="fa-thin fa-people-group text-cpPink"></i></span> Our People
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <span class="pages-icon"><i class="fa-thin fa-building text-cpBlue"></i></span> Offices
  </a>
  <a href="#" class="list-group-item list-group-item-action">Departments</a>
  <a href="#" class="list-group-item list-group-item-action">Business Information</a>
  <a href="#" class="list-group-item list-group-item-action">Events & What's On</a>
  <a href="#" class="list-group-item list-group-item-action">Events & What's On</a>
</div>

csstwitter-bootstrapbootstrap-5

Answer №1

By utilizing Bootstrap's utility classes to limit overflow and adjusting the negative top position, I was able to achieve the desired effect without the need for wrapping span elements.

To add a touch of fun, I included an opacity effect in the styling.

.pages-icon {
  font-size: 90px;
  position: absolute;
  right: 0;
  top: -50%;
  transform: rotate(11.81deg);
  opacity: 0.75;
  transition: opacity 0.3s;
}

.list-group-item:hover .pages-icon {
  opacity: 1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2d23ab413215091c44">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV156K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnNUiCIjK1OnMGCdMyOpVK+iUrmIGijQMrrAJrShvNyPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="list-group rounded-10">
  <a href="#" class="list-group-item list-group-item-action overflow-hidden w-100">
    <i class="fa-solid fa-people-group text-danger pages-icon"></i> Our People
  </a>
  <a href="#" class="list-group-item list-group-item-action overflow-hidden">
    <i class="fa-solid fa-building text-info pages-icon"></i> Offices
  </a>
  <a href="#" class="list-group-item list-group-item-action overflow-hidden">Departments</a>
  <a href="#" class="list-group-item list-group-item-action overflow-hidden">Business Information</a>
  <a href="#" class="list-group-item list-group-item-action overflow-hidden">Events & What's On</a>
  <a href="#" class="list-group-item list-group-item-action overflow-hidden">Events & What's On</a>
</div>

Answer №2

To prevent overflow in your list-items, consider using the CSS property overflow: hidden. This will conceal any content that extends beyond the container boundaries. Alternatively, you can achieve this effect by applying a Bootstrap class.

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

Is there a way to format a block of text so that right-to-left text aligns to the right, while left-to-right text aligns

I have a content block that includes text in both left-to-right and right-to-left languages, and I need to ensure that both display correctly. If the user begins with left-to-right text, it should be displayed from left to right with left alignment If the ...

htmlcss

Achieving consistent height for Bootstrap5 columns: A simple guide

I'm currently utilizing Bootstrap5 and I am interested in adjusting the height of these two columns to be similar. Is there a way to achieve this? Below is the code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email ...

htmlcssheight

Discover the steps to modify the input field type with just a keypress in angularjs

I need help changing an input field type from text to password. Currently, I am able to change the input field type from text to password when clicking on it. However, I also want the type to change from text to password when tab is pressed. Any assistan ...

cssangularjs

Designing a webpage - patterns in the background and images layered on top

I've been tasked with creating a webpage that resembles a theatrical stage. The design calls for the following layout: [curtain repeat][left curtain][stage][right curtain][curtain repeat] The left curtain, stage, and right curtain should maintain a ...

htmlcss

Is there a way to align the image block-grid from left to right?

Is there a way to change the alignment of images in the x-block-grid four-up class to be RTL on this page? () I have managed to make the h2 tag RTL using the following code: <h2 class="h-custom-headline h5 accent" dir="rtl"><span>Code</spa ...

htmlcssalignment

The width of table columns is altered upon the second rendering in JQuery DataTables

Is there a way to prevent JQuery DataTables cells from extending width after adding hyperlink to cell? I am facing an issue where I have two tables on the same page. The first table column has a link which populates the second table. It works fine when th ...

htmljquerycssajaxdatatables

Update the appearance of a webpage using a custom JavaScript function

My goal is to modify a CSS style whenever a button is clicked. In order to achieve this, I have implemented a JavaScript function that creates a new class for CSS along with several other functionalities. Here's how the JS function currently appears: ...

javascripthtmlcss

Ways to eliminate basic text from HTML/HAML

Seeking a solution to align an image with CSS that is being hindered by unwanted text appearing next to it in Inspect Element. Despite pinpointing the source of the issue, attempts to remove the text have been unsuccessful and it continues to be a nuisance ...

htmlcsshaml

Why do certain full screen websites not align with my screen width properly?

When I use my 1920px wide screen and inspect the HTML tag with Chrome DevTools on websites like Firebase or Facebook Messenger, I notice a difference: https://i.sstatic.net/1nknq.png Despite my screen width being 1920px, these websites appear fullscreen ...

htmlcsswidth

The Google Share button may fail to be displayed correctly if it was initially hidden

Is there a solution to the issue where the Google Share button does not display properly when it is initially hidden using CSS display:none on its parent div and then shown using jQuery .show()? I am currently experiencing this problem and I'm unsure ...

jquerycssgoogle-plus

JS not functioning properly in specific pages causing display issues with page height set to 100%

I am facing an unusual issue where certain pages do not stretch to 100% page height in the middle section, causing the left-hand border to be incomplete. For example, on the 'Brentwood' site (please click on the 'Login' link in the top ...

javascripthtmlcss

Having trouble with Vuejs Ternary Operator or Conditional in v-bind-style?

Having some unexpected issues while trying to implement a style conditional for items in Vuejs. I have come across Stack Overflow posts on how to use a ternary, either through an interpolated string or a computed style object. I've attempted both met ...

javascriptcssvue.jsconditional-statementsternary-operator

CSS: Struggling with Div Alignment

Here is a visual representation of the issue I am facing: View the screenshot of the rendered page here: http://cl.ly/image/0E2N1W1m420V/Image%202012-07-22%20at%203.25.44%20PM.png The first problem I have encountered is the excessive empty space between ...

htmlcss

Struggling to make changes to a Styled Component in a React application

In a certain file, I have a BaseComponent composed of various other components and being exported. The top level of the BaseComponent contains a wrapper responsible for managing margins. When I export it and attempt to override some styles with: //other fi ...

javascriptcssreactjsstyled-components

Expanding content to cover the entire width using CSS Bootstrap 5

As a newcomer to Bootstrap, I am working on customizing an existing Bootstrap example. My objective is to expand the width of the div tag (with id "inner") to fill the entire screen. I have experimented with various approaches, such as resetting the margi ...

htmlcsstwitter-bootstrapbootstrap-5

Hide the button when you're not actively moving the mouse, and show it when you start moving it

How can I make my fixed positioned button only visible when the mouse is moved, and otherwise hidden? ...

javascripthtmlcss

Generate a visually dynamic representation of a live website page

I'm curious if it's possible to create a login page similar to the one shown in this image, using HTML, CSS, and Javascript. Instead of a traditional background image, I want the background to display the actual layout of another website, such a ...

javascripthtmlcss

Displaying Bootstrap 5 Cards in a Vertical Layout

My webpage currently displays a row of cards horizontally, but I would like them to align vertically on smaller screens. Currently, when the screen is shrunk, the cards go off the page instead of stacking vertically. I still want the cards to have equal sp ...

htmlbootstrap-5bootstrap-cards

Is it possible to generate this result using only Bootstrap 5.2.3?

I'm currently working on a simple HTML project that aims to replicate the layout shown in the image below. I want the output to look exactly like what's displayed in the provided image. The task does not require CSS, only Bootstrap is needed for ...

htmltwitter-bootstraptwitter-bootstrap-3bootstrap-5

What are the placeholders for the "localIdentName" query tag in a custom CSS-loader for Webpack?

Just starting out with Webpack and experimenting with the css-loader. I came across the option to specify a localIdentName query tag on the Github page under "Local Scope". This tag allows us to define our own custom values for how classes should be named ...

javascriptcsswebpackloader