Problem with icon overlay on commit button

Question

In a store based on Prestashop, in the backoffice, there is a button that has an icon inside that is preventing the submission of a button, as could cause the icon to be ignored when clicking this button?

HTML:

<div class="panel-footer">
    <a href="index.php?controller=AdminProducts&amp;token=9aa71815d1823d502542e0ddedffdcdb" class="btn btn-default"><i class="process-icon-cancel"></i> Cancelar</a>
    <button type="submit" name="submitAddproduct" class="btn btn-default pull-right"><i class="process-icon-save"></i> Salvar</button>
    <button type="submit" name="submitAddproductAndStay" class="btn btn-default pull-right"><i class="process-icon-save"></i> Salvar e permanecer</button>
</div>

CSS of the icon:

.bootstrap .btn.btn-default i {
    color: #555;
}
[class^="process-icon-"] {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    font-size: 28px;
    background: transparent;
    background-size: 26px;
    background-position: center;
}
.bootstrap * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.icon-fw, [class^="icon-Admin"], [class^="process-icon-"] {
    width: 1.28571em;
    text-align: center;
}
.icon-2x, .page-sidebar-closed:not(.nav-topbar):not(.mobile-nav) .searchtab:before, [class^="icon-Admin"], [class^="process-icon-"] {
    font-size: 2em;
}
.icon, .page-sidebar-closed:not(.nav-topbar):not(.mobile-nav) .searchtab:before, [class^="icon-"], [class^="process-icon-"], .bootstrap .alert.alert-warning:before, .bootstrap .alert.alert-danger:before, .bootstrap #carrier_wizard .wizard_error:before, .bootstrap .alert.alert-success:before, .bootstrap .alert.alert-info:before, .bootstrap .alert.alert-addons:before, .bootstrap .alert.alert-onboarding:before, .bootstrap .alert.alert-message:before, .bootstrap .table td.dragHandle .dragGroup:before, .bootstrap #dashboard .loading .data_value:before, .bootstrap #employee-thumbnail:before, .mce-ico, .chosen-container-single .chosen-single div b, .chosen-container-single .chosen-search:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
user agent stylesheet
i, cite, em, var, address, dfn {
    font-style: italic;
}
Inherited from button.btn.btn-default.pull-right
.bootstrap .panel .panel-footer .btn, .bootstrap #dash_version .panel-footer .btn, .bootstrap .message-item-initial .message-item-initial-body .panel-footer .btn, .bootstrap .timeline .timeline-item .timeline-caption .timeline-panel .panel-footer .btn {
    line-height: 1em;
}
.bootstrap .btn-default {
    color: #363A41;
    background-color: #fff;
    border-color: #DEDEDE;
}
.bootstrap .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.42857;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.bootstrap input, .bootstrap button, .bootstrap select, .bootstrap textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
user agent stylesheet
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
}
user agent stylesheet
input, textarea, keygen, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em 0em 0em 0em;
    font: 13.3333px Arial;
}
Inherited from body.ps_back-office.page-sidebar.adminproducts
body {
    font: 400 12px/1.42857 "Open Sans",Helvetica,Arial,sans-serif;
    color: #555;
    background-color: #EFF1F2;
    -webkit-tap-highlight-color: transparent;
}
Inherited from html.js
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
Pseudo ::before element
.icon-save:before, #content .process-icon-save:before, #content .process-icon-save-and-stay:before, #content .process-icon-save-and-preview:before, .icon-floppy-o:before, .icon-save:before, #content .process-icon-save:before, #content .process-icon-save-and-stay:before, #content .process-icon-save-and-preview:before {
    content: "";
}

PS: This problem only occurs in the latest version of Google Chrome and IE Edge browser.

Answer 1

I solved the problem as follows:

.bootstrap .btn.btn-default i {
 color:#555,
 pointer-events:none;
}