xeditable bootstrap4 + fontawesome4 + adhoc css

xeditable bootstrap4 + fontawesome4 + adhoc css

by BenjamĂ­n Xolotl Torres Luna

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">


  <div>
    <span>Username:</span>
    <a href="#" id="username" data-type="text" data-placement="right" data-title="Enter username">superuser</a>
  </div>


</div>

CSS

.glyphicon-ok::before {
  content: "Editar";
}

.glyphicon-remove::before {
  content: "Cancelar";
}

.glyphicon {
  font-family: 'FontAwesome';
  font-style: normal;
}

JavaScript

$(document).ready(function() {
  //toggle `popup` / `inline` mode
  $.fn.editable.defaults.mode = 'inline';

  //make username editable
  $('#username').editable();
});