Bootstrap Glyphicons broken in translated view (Arabic)

I have a form on the User profile page with a “Save” button with a checkmark (Bootstrap class .glyphicon-ok). The problem is, when I view the page in Arabic, the Glyphicon is being rendered in Times font instead of Bootstrap’s Glyphicon font. So, it shows up as a square.

Any ideas how I can fix this problem? I have tried things like adding an ar/ prefix to Bootstrap’s style.css, as in:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('ar/sites/all/themes/agfe/bootstrap/dist/fonts/glyphicons-halflings-regular.eot');
  src: url('ar/sites/all/themes/agfe/bootstrap/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

But to no avail.

Drupal version: