How to replace a fontawesome 5 icon?

Question

I'm working on an ASP.NET MVC project where I have a fontawesome pencil icon. When clicked, I want to allow the user to edit the field next to the pencil, and replace the pencil with a save icon. My includes are bootstrap 4, jquery 3.2.1, and fontawesome 5.

I can't seem to get this to work. At first I attempted to outright replace the icon, however, now I'm attempting to have both icons on the page, then hide/show the appropriate one when needed.

Here's my markup where @(item.Id)) will populate an integer.

<td>
  <span id="actionItemDate@(item.Id)">@item.FollowUp.ToShortDateString()</span>
  <i class="fa fa-pencil-alt fa-xs" id="actionItemEditDate@(item.Id)" onclick="actionItemEditDate(@item.Id)"></i>
  <i class="fa fa-save fa-xs invisible" id="actionItemSaveDate@(item.Id)"></i>
</td>

When I look at the page, it renders out to this:

<td>
  <span id="actionItemDate3">12/7/2017</span>
  <svg class="svg-inline--fa fa-pencil-alt fa-w-16 fa-xs" id="actionItemEditDate3" onclick="actionItemEditDate(3)" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="pencil-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg>
  <!-- <i class="fa fa-pencil-alt fa-xs" id="actionItemEditDate3" onclick="actionItemEditDate(3)"></i> -->
  <svg class="svg-inline--fa fa-save fa-w-14 fa-xs invisible" id="actionItemSaveDate3" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="save" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"></path></svg>
  <!-- <i class="fa fa-save fa-xs invisible" id="actionItemEditDate3"></i> -->
</td>

And my actionItemEditDate js function is defined as shown:

function actionItemEditDate(id) {
  $("#actionItemDate" + id).text("test");
  $("#actionItemDate" + id).siblings($(".fa-pencil-alt")).addClass("invisible");
  $("#actionItemDate" + id).siblings($(".fa-save")).removeClass("invisible");
}

When I click the pencil, my text changes successfully, and the save icon shows, however, the pencil does not hide. Why?

I created a JS Fiddle: **https://jsfiddle.net/c5ezrojh/1/**. If you're wondering about the button click handler in the fiddle: https://stackoverflow.com/questions/5431351/why-isnt-my-javascript-working-in-jsfiddle — Abbas, Dec 19 '17 at 15:38

score 2 · Accepted Answer · answered Dec 19 '17 at 15:55

Yeah, FontAwesome 5 replaces your markup with SVG elements but it also copy originals attributes such as id="...".

I also had issue attempting to add/toggle/remove class using jQuery on those SVG elements, ~~and I still don't know why~~ because jQuery simply can't.

However, you can use show/hide or even toggle to achieve what you want :

function actionItemEditDate() {
  $("#actionItemDate").text("test");
  $(".toggle").toggle();
}

function actionItemSaveDate() {
  $("#actionItemDate").text("Saved !");
  $(".toggle").toggle();
}

.invisible {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

<span id="actionItemDate">01/01/2018</span>
<i class="fa fa-pencil-alt fa-xs toggle" id="actionItemEditDate" onclick="actionItemEditDate()"></i>
<i class="fa fa-save fa-xs toggle invisible" id="actionItemSaveDate" onclick="actionItemSaveDate()"></i>

I added the toggle class to your icons and called jQuery's toggle to show/hide them on click. You could also use show and hide like this :

function actionItemEditDate() {
  $("#actionItemDate").text("test");
  $("#actionItemSaveDate").show();
  $("#actionItemEditDate").hide();
}

function actionItemSaveDate() {
  $("#actionItemDate").text("Saved !");
  $("#actionItemSaveDate").hide();
  $("#actionItemEditDate").show();
}

.invisible {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

<span id="actionItemDate">01/01/2018</span>
<i class="fa fa-pencil-alt fa-xs toggle" id="actionItemEditDate" onclick="actionItemEditDate()"></i>
<i class="fa fa-save fa-xs toggle invisible" id="actionItemSaveDate" onclick="actionItemSaveDate()"></i>

How to replace a fontawesome 5 icon?

1 Answers1