What is the best way to display a red cross on a button?

Could you please help me add a red cross (font awesome icon) to the button?

I attempted to implement the code on JSFiddle.

However, I still need:

UPDATE

Initially, I found Kiranvj's answer suitable for its simplicity and applicability to all relevant codes.

Upon integrating the changes from Kiranvj's answer into the main code, I did not achieve the desired outcome.

Complete Code:

[CSS code here] ....

[HTML code here]

I want the red cross icon on all blue buttons. (It may vary, so each button should have a separate div or i)

Note: The button placements are not fixed, and try to avoid positioning from the sides.

JSFiddle links with alternative solutions:

htmlcssbuttonfont-awesomefont-awesome-5

Answer №1

.button_custom_quit {
  background-color: red;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 35px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
}

.button_custom_quit:hover {
  color: red;
  font-weight: bold;
  background: none;
  border: 2px solid red;
}

.button_custom_ll {
  background-color: blue;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 35px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
}

.button_custom_ll:hover {
  color: blue;
  font-weight: bold;
  background: none;
  border: 2px solid blue;
}

.button_custom_time {
  background-color: #FF8C00;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 35px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
}

.button_custom_time:hover {
  color: #FF8C00;
  font-weight: bold;
  background: none;
  border: 2px solid #FF8C00;
}

#container_custom {
  width: 100%;
}

#left_custom {
  float: left;
  width: 100px;
}

#right_custom {
  float: right;
  width: 100px;
}

#center_custom {
  margin: 0 auto;
  width: 100px;
}

#play_head {
  display: flex;
  /* establish flex container */
  flex-direction: row;
  /* default value; can be omitted */
  flex-wrap: nowrap;
  /* default value; can be omitted */
  justify-content: space-between;
  /* switched from default (flex-start, see below) */
}

.button_custom_ll:before, .button_custom_ll:after {
  position:absolute;
  content: '';
  top: -5px;
  bottom: -5px;
  width: 5px;
  background: #ff0000;
  left: 0;
  right: 0;
  margin: 0 auto;
  
}
.button_custom_ll:before {
transform: skew(30deg);
}
.button_custom_ll:after {
transform: skew(-30deg);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<body bgcolor="Aqua">
  <div id="play_head">
    <div>
      <button class="button_custom_quit"><i class="fas fa-sign-out-alt"></i></button>
    </div>
    <div>
      <button class="button_custom_ll" style='margin-right:45px'>50</button>
      <button class="button_custom_ll" style='margin-right:45px'>x2</button>
      <button class="button_custom_ll" style='margin-right:45px'><i class="fas fa-sync"></i></button>
    </div>
    <div>
      <button class="button_custom_time"><i class="fas fa-sync"></i></button>
    </div>
  </div>
</body>

Answer №2

Give this a shot

.custom_button_blue {
  background-color: blue;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 35px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
}

.custom_button_blue:hover {
  color: blue;
  font-weight: bold;
  background: none;
  border: 2px solid blue;
}

i#complete:before {
  position: absolute;
  font-size: 1.5em;
  left: 10px;
}
<body bgcolor="Aqua">
  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
  <i id="complete" class="fas fa-times fa-3x" style="color: red;"><button class="custom_button_blue" style='margin-right:45px'>50</button></i>
</body>

Answer №3

To make the icon appear within the button, you need to set the button's position to relative and the icon's position to absolute. Then you can adjust the positioning using properties like left, right, and transform:

.button_customized {
      background-color: blue;
      border: none;
      color: white;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 35px;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 50%;
      position: relative;
}

.button_customized i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 2.5em;
}

.button_customized:hover {
      color: blue;
      font-weight: bold;
      background: none;
      border: 2px solid blue;
}
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<button class="button_customized" style='margin-right:45px'><i id="cmplt" class="fas fa-times" style="color: red;"></i>50</button>
</body>

Answer №4

To achieve the desired outcome, utilize position: relative and position: absolute. Consider implementing the following code snippet.

<body bgcolor="Aqua">
  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
  <button class="button_cstm_ll" style='margin-right:45px'><i id="cmplt" class="fas fa-times" style="color: red;"></i>50</button>
</body>

.button_cstm_ll {
  background-color: blue;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 35px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  position: relative;
}
.button_cstm_ll:hover {
  color: blue;
  font-weight: bold;
  background: none;
  border: 2px solid blue;
}
.button_cstm_ll .fas {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 150px;
  line-height: 0.7;
}

Answer №5

.button_cstm_ll {
  background-color: blue;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 35px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
}

.button_cstm_ll:hover {
  color: blue;
  font-weight: bold;
  background: none;
  border: 2px solid blue;
}

#cmplt:before {
  position: absolute;
  left: 14px;
  top: 22px;
}
<body bgcolor="Aqua">
  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
  <i id="cmplt" class="fas fa-times" style="color: red;font-size:70px;"><button class="button_cstm_ll" style='margin-right:45px'>50</button></i>
</body>

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

Tips for uploading separate icons using FontAwesome version 6

I have a Laravel web app that utilizes an NPM/Webpack build process, and I am currently importing the SCSS icon sheet versions of FontAwesome like this: @import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import '~@fortawesome/fontaw ...

laravelnpmbuildfont-awesomefont-awesome-6

Having difficulty with CSS animation and background issues

I can't seem to get my rotating background to work using CSS keyframe animation. I've tried different things but can't figure out what's going wrong. Below is my code: .main-header { width: 100%; Height: 128px; } .main-header, ...

cssanimation

Updating checkbox Icon in Yii2

Is there a way to customize the checkbox icon when it is checked in Yii2? Currently, I am adding a checkbox inside a div along with an icon: <i class="fa fa-check-circle icon-check-circle"></i>. However, the checkbox shows a default check symbo ...

javascriptjquerycssyii2yii2-advanced-app

What HTML template is your go-to when starting a new project?

Is this the ultimate solution for creating a basic "Hello World" HTML template? I have been experimenting with this starter code to develop simple websites. Are there any other interesting tags I could incorporate to enhance it further? Usually, I refer ...

jqueryhtmlcsstemplatesbootstrap-4

What are the steps in creating a responsive UI with CSS?

How can I create a responsive UI using css for the following code snippet? <Text className="w-100 mt-0 align-self-center"> Lorem ipsum Lorem ipsum Lorem ipsum<span>{'$200'}</span> </Text> <Text classNam ...

htmlcssreactjsresponsive-designbootstrap-5

tracking scroll position within div on main page

I have a div tag enclosed within a content tag due to the implementation of a masterpage containing the forms and body tags. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"> <div id="xxx" style="overflow:s ...

c#javascriptasp.netgridviewhtml

Arranging inline-flex elements within a div container

I have been struggling to position two elements side by side within a single div, where the second element should be on the right side. <div className={classes.container}> <div className={classes.first}> First </div> <d ...

cssflexboxmaterial-ui

Raycasting in three.js - mouse pointer and highlighting not precisely aligned with intersected mesh

My current setup involves using a raycaster to highlight a row of cubes arranged in a grid format. The highlighting works fine, but I'm encountering issues with the cursor turning into a pointer precisely over the cubes in the row. Moreover, the highl ...

javascriptcssthree.jsmouseoverraycasting

Elements that are added dynamically will not inherit the correct CSS styles, requiring JavaScript to style them properly

My <ul> element dynamically adds <li> elements, and I am attempting to make the first <li> wider at 63% while the others are at 60%. However, the first one is only getting a width of 60%. Any thoughts on why this might be happening? I ne ...

javascriptjqueryhtmlcss

Can you explain the contrast between the functions 'remove' and 'removeChild' in JavaScript?

I have recently coded an HTML page in order to gain a better understanding of how element removal functions. Code: <html> <head> <script> var childDiv = null; var parent1 = null; var parent2 = null; function ...

javascripthtml

Adding a class to an img tag with TinyMCE

Currently, I am utilizing the TinyMCE editor as a standalone editor in my content management system (CMS). Within the CMS, there is an automatic setting that adds a curved border to any image tags within the cms div ID. In certain cases, I require the op ...

phpjavascriptcsstinymcewysiwyg

Creating a loading spinner in a Vue component while using the POST method

After successfully creating a loader for fetching data using the GET method, I encountered challenges when attempting to do the same with POST method. Is there a reliable way to implement a loader during the POST data process? For GET method, I set the lo ...

javascripthtmlcssvue.jsvuejs2

What are the best methods for maintaining the appearance of my website when resizing my browser window?

I am replicating the Twitter profile page, but I am facing an issue where the text and images get jumbled together whenever I resize my browser. This results in a messy appearance of the page. How can I ensure that the text and images stay in the same rela ...

htmlcsstwitter-bootstrapresponsive-design

Dynamically include new events

Here is the code snippet I have in a JS file: $(".dropmenu").on("click", function(event){ event.preventDefault(); $(this).parent().find("ul").slideToggle(); }); On my webpage, I'm using the following code: var append="<ul> ...

jquerycsseventsdynamic

Displaying multiple div elements when a button is clickedLet multiple divs be

ISSUE Hello there! I'm facing a challenge where I need to display a div when a button is clicked. The issue arises from having multiple divs with the same class, making it difficult for me to target each individual div... Image1 Image2 Desired Outco ...

javascriptjqueryhtmlcss

The alert box fails to display in the correct orientation when the condition is activated

Currently, I am working on implementing a sign-up feature using PHP. My main goal is to successfully store the user-entered data in MySQL database while ensuring that no duplicate usernames are allowed during account creation. Although everything is functi ...

javascriptphphtml

Enable compatibility with high resolution screens and enable zoom functionality

My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...

javascriptcssresponsive-design

Setting the width of colspan elements can be challenging when other columns have dynamic widths

I am working with a table setup that includes various columns for data tracking: <table > <thead style="width: calc(100% - 15px); display: table; table-layout: fixed;"> <tr> <th colspan="3">& ...

csshtml

Unable to open fancybox from a skel-layer menu

Seeking assistance with integrating a Fancybox inline content call from a Skel-layer menu (using the theme found at ) <nav id="nav"> <ul> <li><a href="#about1" class="fancybox fancybox.inline button small fit" >about< ...

javascriptphpjqueryhtmlfancybox

Issues encountered while attempting to convert HTML Image and Canvas Tags to PDF within Angular 2

I am currently facing an issue with my code. My requirement is to download HTML content as a PDF file. I have been successful in downloading text elements like the <p> tag, but I am encountering difficulties when trying to download images and canvas ...

htmlangulartypescriptpdfcanvas