Laravel Glyphicons

Question

I'm using Laravel 5.4 for this project.

BUTTON CODE

<div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">I Agree</button>
</div>

JS Code for Button to make it a Checkbox

$(function () {
$('.button-checkbox').each(function () {

    // Settings
    var $widget = $(this),
        $button = $widget.find('button'),
        $checkbox = $widget.find('input:checkbox'),
        color = $button.data('color'),
        settings = {
            on: {
                icon: 'glyphicon glyphicon-check'
            },
            off: {
                icon: 'glyphicon glyphicon-unchecked'
            }
        };

    // Event Handlers
    $button.on('click', function () {
        $checkbox.prop('checked', !$checkbox.is(':checked'));
        $checkbox.triggerHandler('change');
        updateDisplay();
    });
    $checkbox.on('change', function () {
        updateDisplay();
    });

    // Actions
    function updateDisplay() {
        var isChecked = $checkbox.is(':checked');

        // Set the button's state
        $button.data('state', (isChecked) ? "on" : "off");

        // Set the button's icon
        $button.find('.state-icon')
            .removeClass()
            .addClass('state-icon ' + settings[$button.data('state')].icon);

        // Update the button's color
        if (isChecked) {
            $button
                .removeClass('btn-default')
                .addClass('btn-' + color + ' active');
        }
        else {
            $button
                .removeClass('btn-' + color + ' active')
                .addClass('btn-default');
        }
    }

    // Initialization
    function init() {

        updateDisplay();

        // Inject the icon if applicable
        if ($button.find('.state-icon').length === 0) {
            $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i>');
        }
    }
    init();
   });
});

Result:

Question:

How can I change that link so it can find my Glyphicons folder my Glyphicons folder can be found at

Public -> fonts -> Bootstrap -> (Glyphicons files)

Answer 1

I know this is dumb way to do it but it works..

modifying the bootstrap code is very crucial.

What I did was to change the source path of the Glyphicons inside of my App.css

my app.css is the stylesheet that holds the code of bootstrap.

this is the part where I have edited the code.

@font-face {
  font-family: Glyphicons Halflings;
  src: url(../fonts/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1);
  src: url(../fonts/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1) format("embedded-opentype"), url(../fonts/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb) format("woff2"), url(../fonts/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158) format("woff"), url(../fonts/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512) format("truetype"), url(../fonts/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760) format("svg")
}

as you can see the source url aren't anymore

src: url(.//fonts/glyphicons-halflings-regu...);

they're already..

src: url(../fonts/bootstrap/glyphicons-halflings-regu...);