Question

初学者，对不起，如果这是一件简单的事情。

我正在使用某人的工作制作复选框按钮，如下所示：

http://jsfiddle.net/DcYhf/36/

源：

（抱歉，一次只能发布一个链接。但请Google bootsnipp复选框按钮）

据我所知，这使用Bootstrap 3.1.1。

当我将小提琴代码复制到普通的html文件并嵌入javascript时，我会在文本前面看到一个奇怪的'A'符号。如果我删除“成功”一词，则只显示“A”符号。

这是我的问题的一个例子： http://i.imgur.com/cJqwXZV.png

我重新复制了代码。我确保我有bootstrap v 3.1.1并且所有内容都正确加载。有谁知道为什么会这样？

谢谢！

<!DOCTYPE html>

<html lang="en">
<head>

  <title>Example of Twitter Bootstrap</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

  <script>
  $(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();
    });
});





var     new_checkbox_button = function(name,id){
            return "<li><span class='button-checkbox'><button type='button' class='btn btn-sm btn-primary active' data-color='primary'><i class='state-icon glyphicon glyphicon-check'></i>&nbsp;"+name+"</button><input type='checkbox' class='hidden' checked=''></span></li>";
        };

$("#add").click(function(){
       $("#selected_targets").append(new_checkbox_button("lallalala","1111"));
});
  </script>
</head>

<body>
<p> Existing checkboxes</p>


    <span class="button-checkbox">
        <button type="button" class="btn" data-color="success">Success</button>
        <input type="checkbox" class="hidden" checked />
    </span>

    <span class = "button-checkbox">
        <button type = "button" class = "btn" data-color = "success"> Success </button>
        <input type = "checkbox" class = "hidden" unchecked />
    </span>
</body>
</html>

Answer 1

当您尝试使用Bootstrap中包含的Glyphicons并且无法找到图标字体时，就会发生这种情况。

要测试这是否确实存在问题，例如Chrome的DevTools，请查看网络标签，看看是否找不到glyphicons-halflings-regular.woff这样的资源。

另一种简单的测试方法是临时使用cdn，将<link href="css/bootstrap.min.css" rel="stylesheet">更改为<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />。

默认情况下，Bootstrap会在../fonts中查找相对于您的CSS的字体。由于您的css为css/bootstrap.min.css，因此会查找fonts。创建一个fonts文件夹并将Bootstraps fonts文件夹的内容复制到其中。

Answer 2

有人在reddit身上找到了我。这是因为我忘了为编码类型（UTF8）添加元标记：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet">
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>


     </head>
     <body>
        <div class="container"> 
        <span class="button-checkbox">
            <button type="button" class="btn" data-color="success">Success</button>
            <input type="checkbox" class="hidden" checked />
        </span>


        <script>

    $(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();
    });
});


     </script>

    </div>
     </body>
     </html>

Bootstrap特殊字符随机显示？

2 个答案: