Mastering the Art of Stacking with FontAwesome

I am working on stacking the Soundcloud icon manually to display it within a square similar to fa-facebook-square. However, my Soundcloud icon is appearing under the square.

This is the code I have so far:

<div class="row">
    <ul style="list-style-type: none; margin: 0px; padding-left: 20px;">
        <li style="margin-bottom: 5px;">
             <div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #ff3a00">
                <i class="fa fa-square fa-1x" style="font-size: 14px; position: relative; z-index: 10"></i>
                <i class="fa fa-soundcloud fa-1x fa-inverse" style="font-size: 8px; position: absolute; z-index: 11; margin-top: 3px; margin-left: 1px"></i>
              </div>Soundcloud
        </li>
        <li style="margin-bottom: 5px;">
            <div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #3b5998;">
                <i class="fa fa-facebook-square"></i>
            </div>Facebook
        </li>
    </ul>
</div>

View the preview here: http://jsfiddle.net/gvdr7889/

If you have any alternative methods or suggestions, feel free to share them.

htmltwitter-bootstrapcssfont-awesome

Answer №1

Try using top and left instead of setting margin-top and margin-left. Adjust the values like 5px and 7px to achieve the desired positioning.

Check out this demo on jsFiddle

Answer №2

Check out this fiddle. I modified it so that the background is now the div you created, with an orange-red color, size, and border radius. Inside, there's the standard fa-soundcloud fa-1x fa-inverse in white. You might need to adjust sizes and colors to fit your preferences.

Furthermore, there's a Github issue asking for a dedicated soundcloud-square icon. It could be beneficial to voice your support for this addition on that platform as well.

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 dynamically choose the name of a state property object in React in order to modify one of its child properties?

In my class, I have defined the following state properties: state = { step: 1, clientName: '', icecreamFlavors: { vanilla: false, chocolate: false, mintChocolateChip: false }, toppings: { sprinkles: fal ...

htmlreactjs

Automatically close the multiselect dropdown when the user interacts outside of it (varied scenario)

For those interested, check out this jsfiddle link: http://jsfiddle.net/jaredwilli/vUSPu/ This specific code snippet focuses on creating a multi-select dropdown feature. When a user chooses options from the dropdown and then clicks outside of the menu are ...

javascriptjquerycssangularjs

Is it possible for a user to chat on Whatsapp by entering their mobile number in an HTML form within the app?

<?php require_once('./database.php'); if(isset($_REQUEST['submit1'])) { $number = $_REQUEST['whatsappnumber']; $code = $_REQUEST['countorycode']; $sql = "INSERT INTO whatsapp (whatsappnumber,counto ...

phphtml

What is the best way to invoke an external JavaScript source using another JavaScript source?

I am trying to connect 2 different files together. file1.php and document.html file1.php has the following code in it: document.writeln('< script src="https://www.googletagservices.com/tag/js/gpt.js"> googletag.pubads().definePassback ...

javascriptjqueryhtml

Modifying the onclick function for a bootstrap glyphicon

How can I swap the .glyphicon-menu-down to glyphicon-menu-up when a user clicks on a link? Currently, it's not working as expected. Could there be an issue with my jQuery implementation? Markup <a data-toggle="collapse" data-parent="#accordion" h ...

javascriptjqueryhtmltwitter-bootstrap

The words run out before the paper does. Keep reading for more details

While updating the CSS on my blog, I ran into an issue where the text in my posts is not extending all the way to the end. To see what I'm experiencing, check out this image- I really need the text to align properly and reach the full width of the p ...

htmlcssblogger

Determining the window height using jQuery when overflow is set to hidden

I've built a full screen web application that I don't want to scroll, so I used this code: $("body").css("overflow", "hidden"); However, after adding a resize listener: $(window).resize(function(){ console.log("Inner height: " + $(window). ...

jqueryhtmlcss

Is there a feature on GitHub that allows for the rendering of HTML code similar to a compiler?

When using Jupyter notebook, I've learned that you can access compiled content like this - https://github.com/ctgk/PRML/blob/63499fffa5c19ec58ece35ed51692ff64112e4dd/notebooks/ch01_Introduction.ipynb by using .ipynb files. However, as a newcomer to Gi ...

htmlgithub

Issue with CSS3 animations

.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; ...

cssanimation

What might be causing the overflow of my page width by my navbar?

I am currently working on creating a product landing page for freecodecamp, and I'm facing some issues with my navbar - the first element I need to get right. Could you help me identify what's wrong with my code? Additionally, I would like to ad ...

htmlcssresponsive-design

Replacing default hover behavior from an external library

Currently, I am utilizing a JS library that comes with a specific widget. Basically, I have the following list (I removed unnecessary DOM code): <li class="disabled"> When I hover over this list item, it turns into: <li class="disabled state-a ...

javascriptcss

Personalize the color and icon of the checkbox marks in sapui5

I'm trying to customize the color of the tick on a UI5 checkbox. After inspecting the CSS, I noticed that it can be modified using the ::before selector: To target the checkbox, I added a class called .accept and defined it in the CSS file like this: ...

csscheckboxsapui5

Using a Custom Variable in PayPal Email Links

Currently, I am developing a compact integrated application for a project that does not involve using a form. In this particular project, the use of HTML is not necessary and instead, only a link can be passed to the browser. The purpose of this link is to ...

phphtmlpaypal

Issue with margin-top in combination with clear:both does not function as expected

<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="clear: both; margin-top: 200px;">Main Data</div> What is causing the margin-top property to not work as expected for 'Main Dat ...

csscss-float

How can I position an input element with the class "button" exactly where I need it on the webpage?

I am struggling to position my input (class="button") where I want it to be html: <div id="popup" class="overlay"> <div class="popup"> <a class="close" href="#">×</a> <div id="content"> <select required name="list" ...

htmlcssbuttoninput

Is there a distinction between em and percentage measurements and do their defaults have specified definitions?

Both em and percentage are defined in relation to other elements or properties. For example, with text-indent, it is related to the width of the paragraph, while with font size, it is related to the browser's default size. The question arises - wh ...

htmlcss

How can I use JavaScript to capture the "MDCMenu:selected" event for the Menu Component in Material Design Web Components?

I am currently using the Material Design Web Components plugin known as "Menu." Once the menu is launched, my goal is to be able to effectively handle all possible ways a "menu item" can be selected. While adding an on-click event through my framework&apo ...

javascripthtmlvue.jseventsmdc-components

Reduce the height of the tabs bar in the Gnome terminal

After recently installing Lubuntu 16.04 with gnome-terminal, I noticed that the terminal takes up more space on my monitor due to two unnecessary buttons in the top right corner. For avid terminal users like myself, these buttons only add bulk to the tabs ...

cssubuntutabsgtk3gnome-terminal

When a custom icon is clicked in the vue-select dropdown, the custom method is not activated

In my current project, I am creating a vue-component based on vue-select. Within this component, I have added a custom info Icon. The issue I am facing is that when the user clicks on the Icon, instead of triggering my custom method getInfo, it opens the s ...

javascriptcssvue.jstailwind-cssvue-select

How to set DIVS to be hidden when the page first loads

I am currently working on a project where I need to use JavaScript to hide certain <div> elements when the page loads. I have also included jQuery in my code. Below is what I have tried so far: $(document).ready(function() { hide(); function hid ...

javascriptjqueryhtml