Changing Font Awesome Button Style onClick

Question

I have a button styled as a Font Awesome.

              <button
                onClick={this.changeLockButtonStyle}
                id="LockButton"
                >
                <FaLockOpen />
              </button>

I'm trying to find a way to change the style to <FaLockClosed /> From reading up online the only examples I see are regarding JQuery and class=”fas fa-lockclosed” toggle class. But I am using a button, not the normal icon. I have tried document.getElementById('LockButton').innerHTML= '<FaLockClosed />' but doesnt work. I'd like to avoid using JQuery if possible.

have you tried just removing the current class and replacing it with a new one to change the style? — Souhailhimself, Sep 13 '20 at 18:03
@Souhailhimself But the example above is not setting the class no? Its set up using the npm install of FA. I just tried your solution and used the stylesheet and ``` ``` However, no icon shows, its an empty button. — Jinckz, Sep 13 '20 at 18:30

Sergej Klackovskis · Accepted Answer · 2020-09-13T18:48:46.440

2

Here you go:

const [isLocked, setIsLocked] = useState(false);

return (
    <button
        type="button"
        onClick={() => { setIsLocked(true); }}
    >
        {isLocked ? <FaLockClose /> : <FaLockOpen />}
    </button>
);

Update: Thats how you do it in class component.

constructor(props) {
    super(props);

    this.state = {
        isLocked: false
    };

    this.lockIcon = this.lockIcon.bind(this);
}

lockIcon() {
    this.setState({ isLocked: true });
}

render() {
    const { isLocked } = this.state;

    return (
        <button
            type="button"
            onClick={this.lockIcon}
        >
            {isLocked ? <FaLockClose /> : <FaLockOpen />}
        </button>
    );
}

edited Sep 13 '20 at 18:48

answered Sep 13 '20 at 18:27

Sergej Klackovskis

453
2
5

Where does `const [isLocked, setIsLocked] = useState(false);` go? I am getting invalid hook error if placing it above the class. – Jinckz Sep 13 '20 at 18:42
In class component you do it different way. I updated the answer. – Sergej Klackovskis Sep 13 '20 at 18:49
Thank you! It is working now. Will I be able to use this for multiple buttons? Will I just need to add multiple "locked" states to the constructor? – Jinckz Sep 13 '20 at 19:04
Depends from your needs. If one click should lock all the buttons: yes. If click should lock specific button, then you need to declare the separate state for each of them. – Sergej Klackovskis Sep 13 '20 at 19:11

score 0 · Answer 2 · answered Sep 13 '20 at 18:05

0

My best practice solution is using css class. But if you can't do it , you can use display state for the 2 icons that controlled by a javascript variable.

answered Sep 13 '20 at 18:05

RoyGross

36
1

Could you give an example? – Jinckz Sep 13 '20 at 18:32

Edward Romero · Answer 3 · 2020-09-13T19:00:52.873

If you using react or angular, I would just toggle the component depending on a variable set during button pushed.

Reference on how to do the toggle in react https://stackoverflow.com/a/46425155/14167216

Here is a jQuery example. You can set the class on the button and then check if button has class. If it has lock class then change to unlock class, and vice-versa. Check the sample code below.

function changeLockButtonStyle() {
  var icon = $('#LockButton')
  var hasLock = icon.hasClass('fa-lock');
  if(hasLock) {
     icon.removeClass('fa-lock').addClass('fa-unlock');
  } else {
     icon.removeClass('fa-unlock').addClass('fa-lock');
  }
}

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <button
      onClick='changeLockButtonStyle()'
      id="LockButton"
      class="fa fa-lock"
    >
    </button>
</body>

Probably going to go this route, but is it possible without JQuery? — Jinckz, Sep 13 '20 at 18:48
You could try to do raw javascript like this https://stackoverflow.com/a/43824723/14167216 or similarly like this https://stackoverflow.com/a/26736704/14167216 — Edward Romero, Sep 13 '20 at 18:50
If using react or angular, just toggle the component depending on a variable set to falsy or thuthy on button clicked — Edward Romero, Sep 13 '20 at 19:02

Changing Font Awesome Button Style onClick

3 Answers3