How can I make Icon bigger without changing the button size?

Question

I recently had this code to have a button that copies the URL to the clipboard. It had a text displayed on the button ("copy") and after clicking on the button the text turned to "kopiert" ("copied"). 2 seconds later it turned back.

Now I changed the originalText to an Icon. The problem is, that the icon turns into the old "kopiert" text and after 2 Seconds it turns to the originalText. But the Icon is not a text anymore, so it turns to nothing. How can I change that, so it turns back to the Icon again? Also I would like to replace the "kopiert" text to the same icon, but the icon is a little more bigger. What method or function can I use to achieve this?

The turning back to Icon is fixed. I only don't know how to make the Icon bigger in Javascript. I guess I need to change the Font-Size, but how can I do that in Javascript?

I changed the Fontsize with https://stackoverflow.com/a/56825511/14969267. Now the Problem is, that the Button size changes, because of the font-size.

EDIT: I fixed the whole Issue. Thanks for the help!

var $temp = $("<input>");
var $url = $(location).attr('href');

$('.clipboard').on('click', function() {
const originalText = $('.clipboard').html();

// CSS function:
const addCSS = s => document.head.appendChild(document.createElement("style")).innerHTML=s;

$("body").append($temp);
$temp.val($url).select();
document.execCommand("copy");
$temp.remove();
$('.clipboard').html(originalText);
// CSS Usage: 
addCSS(".clipboard{ font-size: 20px; padding: 4.8px 21.3px 4.8px 21.3px; }")

// Run something in 1 seconds to revert back to the button's text
setTimeout(function() { 
addCSS(".clipboard{ font-size: 15px; padding: 9px 21.3px 9px 21.3px}")
$('.clipboard').html(originalText);
}, 1000); // 1 seconds

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="background">
  <center>
    <button class="clipboard"><i class="fas fa-copy"></i></button>
  </center>
</div>

Look for the `.html()` method instead of `.text()`. I suggest you to edit your question with some specific question based on a failed attempt, instead of ***I would like to...*** which feels like a code request more than anything. — Louys Patrice Bessette, Jul 02 '21 at 14:31
Yeah sorry. That sounds wrong. The `.html()` method was what I was looking for! Thank you! — ekalem, Jul 02 '21 at 14:43
the snippet you posted is not working. Please fix it so that we can reproduce the issue you have — Lelio Faieta, Jul 02 '21 at 15:23
Firstly, the `center` element is [obsolete](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center). Don't use it. — isherwood, Jul 02 '21 at 15:37
Hey, thank you! I just fixed the issue a few seconds ago. It it still buggy here in StackOverflow, but that is probably because the CSS is missing here. But still, thanks a lot! — ekalem, Jul 02 '21 at 15:40
You're doing some things that imply limitations with regard to what markup you can use, such as dynamically creating elements and CSS. If that's the case you should clarify in your question. — isherwood, Jul 02 '21 at 16:03

score 0 · Answer 1 · edited Jul 06 '21 at 15:18

A common strategy here is to simply put each possible button content in a span element (or other inline element) and toggle them as needed. That saves you from having to track and create text content. You can style each inner element as needed with CSS and call it good.

var $temp = $("<input>");
var $url = $(location).attr('href');

$('.clipboard').on('click', function(e) {
  const btn = $(this);

  // copy to clipboard
  $("body").append($temp);
  $temp.val($url).select();
  document.execCommand("copy");
  $temp.remove();

  // show copied message
  btn.find('i').hide();
  btn.find('.copied-text').show();

  // Wait 1 second to revert the button content
  setTimeout(function() {
    btn.find('.copied-text').hide();
    btn.find('i').show();
  }, 1000); // 1 seconds

})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
  .background {
    text-align: center;
  }
  
  button {
    font-size: 20px;
    padding: 4.8px 21.3px 4.8px 21.3px;
    min-width: 140px;
  }
  
  .copied-text {
    display: none;
    font-size: 15px;
    padding: 9px 21.3px 9px 21.3px;
  }
</style>

<div class="background">
  <button class="clipboard">
    <i class="fas fa-copy"></i>
    <span class="copied-text">Kopiert</span>
  </button>

  <button class="clipboard">
    <i class="fas fa-copy"></i>
    <span class="copied-text">Kopiert</span>
  </button>
</div>

How can I make Icon bigger without changing the button size?

1 Answers1