Tips for effectively showcasing icons on buttons

I am experiencing issues with my code that is causing icons to be displayed incorrectly, appearing in the upper left corner and cut off rather than being centered and fully shown.

<link rel="stylesheet" id="simple-css" href="//cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" type="text/css" media="all">


<div id="button-offer">
<div class="container">
<div class="text-center">
<div class="btn btn-offer btn-lg btn-watch" data-toggle="modal" data-target="#player-modal">
<span class="btn-bg"><i class="fa fa-share" aria-hidden="true"></i></span> Read Intro
</div>
<a class="btn btn-offer btn-lg btn-download" onclick="pdf_demo_download()">
<span class="btn-bg"><i class="fa fa-share" aria-hidden="true"></i></span> Download
</a>
</div>
</div>
</div>

The correct display should look like this: 

https://images2.imgbox.com/f8/5f/4O2RA6V1_o.png
However, they are currently being shown like this: 
https://images2.imgbox.com/bc/e1/7sLUZlog_o.png

UPDATE: Included CSS button code snippet

#button-offer{padding:15px 0;background:#000;}
.btn-offer:focus,.btn-offer:active{color:#fff;}
.btn-watch{background-color:#c00;}
.btn-download{background-color:#c00;}
.btn-offer{outline:none!important;color:#fff;padding:15px 20px 15px 70px;text-decoration:none;border-radius:3px;font-family:Oswald,Sans-serif;font-weight:700;letter-spacing:1px;text-shadow:0 1px 1px #000;position:relative;text-transform:uppercase}
.btn-bg{color:#fff;display:inline-block;position:absolute;width:30px;height:54px;top:0px;left:-1px;background-color:#333;border-radius:3px 0 0 3px}
.btn-bg:before{background-color:#9C360E;content:"";position:absolute;top:8px;width:38px;height:38px;background:inherit;border:inherit;border-left-color:transparent;border-bottom-color:transparent;border-radius:0 4px 0 0;-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);left:10px;border-right:1px solid;border-top:1px solid}
.btn-bg .icon{position:relative;top:16px;left:7px}
.btn-watch:hover{color:#fff;background-color:#6f0404;}
.btn-download:hover{color:#fff;background-color:#6f0404;}
.sub-section span, .widget-title span{background:#c00;}
css

Answer №1

Can anyone tell me where the button is located on this page? Remember to use <i> instead of <span>. The correct syntax should resemble this:  Read Intro

The button should also display the appropriate icon as intended.

Answer №2

you simply followed this code and incorporated it into your project

#button-offer{padding:15px 0;background:#000;}
.btn-offer:focus,.btn-offer:active{color:#fff;}
.btn-watch{background-color:#c00;}
.btn-download{background-color:#c00;}
.btn-offer{outline:none!important;color:#fff;padding:15px 20px 15px 70px;text-decoration:none;border-radius:3px;font-family:Oswald,Sans-serif;font-weight:700;letter-spacing:1px;text-shadow:0 1px 1px #000;position:relative;text-transform:uppercase}
.btn-bg{color:#fff;display:inline-block;position:absolute;width:30px;height:45px;top:0px;left:-1px;background-color:#333;border-radius:3px 0 0 3px}
.btn-bg:before{background-color:#9C360E;content:"";position:absolute;top:8px;width:38px;height:28px;background:inherit;border:inherit;border-left-color:transparent;border-bottom-color:transparent;border-radius:0 4px 0 0;-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);left:10px;border-right:1px solid;border-top:1px solid}
.btn-bg .icon{position:relative;top:16px;left:7px}
.btn-watch:hover{color:#fff;background-color:#6f0404;}
.btn-download:hover{color:#fff;background-color:#6f0404;}
.sub-section span, .widget-title span{background:#c00;}
i{position: absolute;
  padding-top: 11px;
  font-size: 25px !important;
}
<link rel="stylesheet" id="simple-css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">


<div id="button-offer">
<div class="container">
<div class="text-center">

<button class="btn btn-offer btn-lg btn-watch" data-toggle="modal" data-target="#player-modal"><span class="btn-bg"><i class="fa fa-share" aria-hidden="true"></i></span> Read Intro</button>
</div>
</div>
</div>

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

How to flexibly show one item on the top line and two items on the bottom line using CSS

I've been trying to solve a simple problem with my flex container layout. I want to display 3 items in 2 rows - one item in the first row and the other 2 in the second row. However, no matter what I try, the items all end up on a single line due to th ...

cssflexbox

Prevent button interaction until completion of modal animation using Bootstrap 4

I have incorporated a Bootstrap 4 modal in my website to display a large navigation menu. The navigation is triggered by a toggle button with a CSS animation that transforms a hamburger icon into an X. However, I encountered an issue where if the button i ...

javascriptjqueryhtmlcssbootstrap-4

Mobile viewing causing problems with website buttons functionality

While my website functions perfectly on desktop, I am facing an issue where the buttons are not working when accessed through mobile devices. Interestingly, these buttons were operating fine in a previous version of the site. Although I have made minimal ...

javascripthtmlcssmobile

How can I eliminate hyperlinks from entire cells within a table using CSS and HTML?

I'm looking to create a web page layout with a footer containing vertically aligned links. To achieve this, I'm currently using a table structure to list out links such as "Mobile", "Help", "Terms", and so on. The issue I'm facing is that t ...

htmlcsshyperlinkhtml-table

excess margin running along the left side of each page

When visiting http://tadris3.ir/, one may notice a peculiar space on the left side of all pages. Can anyone assist in resolving this bothersome issue? https://i.sstatic.net/MsX1a.png ...

jqueryhtmlcssuser-interface

The appearance of the image varies between Chrome and Internet Explorer

Greetings fellow web developers! Currently, I am facing an issue with a logo embedded in a navigation bar displaying differently in Chrome compared to IE version 10 running document standards. The webpage is utilizing bootstrap CSS. Here is the code snippe ...

javascripthtmlcssinternet-explorergoogle-chrome

The dynamic addition of divs to the HTML body is causing them to overlap

Check out this functional plunker that is nearly complete. The current issue I am facing is with the chat divs being dynamically added to the body using $compile, but they all have the same CSS class and end up overlapping each other, like so: .chat-wind ...

cssangularjs

Is there a way I can add opacity to a div without impacting the other elements contained in it?

When I set the opacity of a div, it seems to affect all the other elements inside that div by making them transparent too. However, I am looking for a solution where the child elements do not inherit the opacity of their parent. Any assistance on this is ...

css

Challenges with placement of Div elements

Check out my jsFiddle example here: http://jsfiddle.net/pqCGd/. Within the jsFiddle, you will find a large messages div that contains multiple message divs. In this example, I have manually provided an example of a message div instead of using auto-genera ...

csshtml

Having trouble applying styles to a component using forwardRef

I'm relatively new to React and still trying to wrap my head around the component's lifecycle. However, the issue at hand is proving to be quite perplexing. One thing that confuses me is why adding "setState(10);" causes the style of the "Test" ...

javascripthtmlcssreactjs

Tips on customizing KendoUI-Dialog titlebar using CSS for a single component

I am struggling with styling the KENDO UI dialog in a unique way: Imagine I have a component named WatComponent. Inside this component, When the user clicks the "Forbidden" button, my goal is to make a warning styled dialog appear, with a yellow/orange ...

cssangularkendo-uikendo-ui-angular2

What is the best way to apply padding to the top of a div when it is positioned below another div?

Observing the minimal spacing between the divs AboutDogs and AboutCats, I decided to apply padding-top: 20px to the AboutCats to create a visual distinction. However, I encountered a scenario where only AboutCats exists without any other div above it. In ...

htmlcsssasscss-selectors

What is the best way to change the content of a table cell by clicking on a link?

I am dealing with a table that has data in three columns. The first two columns contain just one or two words each, but the third column contains around 1000 characters. I want to be able to toggle the visibility of this third column's data when click ...

javascriptphpjqueryhtmlcss

The rotation of an image in Microsoft Edge results in an HTML file display

One of the images on my website is sourced like this: <p> <img src="images/image.jpg" style="width: 50%;" /> </p> Surprisingly, in Chrome and Firefox, the image looks fine (just how I uploaded it to the server). H ...

htmlcssimageorientation

Maintain the aspect ratio of an element within a flex container

While there are numerous discussions on aspect ratio, I haven't come across a solution that fits my specific issue. My dilemma is this: I am looking to create a div with a perfect square aspect ratio within a flex parent set at 100% height. Below i ...

htmlcssflexboxaspect-ratio

Playing around with adjusting the size of a div that is positioned absolutely on the right side

Snippet: http://jsfiddle.net/scottbeeson/TU6Zw/ HTML Code: <div id="itemMap" class="shadow"> <div class="mapHeader">List of Items</div> <div class="mapItem">Item 1</div> <div class="mapItem">Item 2</div& ...

cssjquery-uiresizeabsolute

Generate a rubbery effect when hovering over an element

Currently working on my website and I want each letter in the title to have a rubbery effect when hovered over. A great example of this can be found on the home section of . I was considering turning each letter into a span with a specific class that, upo ...

htmlcsswordpress

Animate.css bxSlider text animations

As I am in the process of setting up a slider for my website, I have encountered some issues. I am utilizing bxslider and wished to incorporate animations for the text on each slide by integrating animate.css. Animate.css is quite simple: just add "animat ...

jquerycssanimationbxslider

Is it possible to integrate this ReactJs project into my Electron-based web application?

Currently, I am a novice in JavaScript and am working on developing a web application for my school project using Electron.js. At the moment, my project consists of JS, CSS, and HTML code only. You can view the homepage of my program on Codepen. [Codepen] ...

javascripthtmlcssreactjsspotify

Tips for implementing and utilizing onclick functions in EJS

My goal is to develop a trivia game with interactive features. I aim to enable users to click on an answer, which will trigger a border effect and increase the points variable. Below is the layout of the entire page: <% include ../partials/boilerp ...

javascripthtmlcssexpressejs