html - How to change buttons from bootstrap3 to 4 -

i have been using kind of button in bootstrap 3. action update or modify row in table.

i use bootstrap 4, button not rendering correctly. know have changed, how can fix this?

this code button:

<button type="button" class="btn btn-default">     <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </button> 

instead of glyphicons bootstrap 4 recommends using font-awesome. can read more migrations here. while migration documentation states btn-default btn-secondary, have button rendered have want use btn-light.

here's updated code it.

<button type="button" class="btn btn-light">     <i class="fa fa-pencil fa-2x" aria-hidden="true"></i> </button> 

here's code in working codeply project.