Why is the close button (X) not rendering correctly in my modal?

Question

This is what I'm getting:

I'd like the close button in the top right corner to be an X, which I believe it should be by default anyway. Keep in mind the modal works perfectly, and when I click on the close button (A~-) it works as intended. I've tried running it on IE, Chrome and Firefox, and in all the cases the problem persists.

Any ideas?

---

<div id="group" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="groupLabel"
     aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="groupLabel">Add group</h3>
    </div>
    <div ng-controller="Ctrl">
        <form ng-submit="addGroup(newGroup, newColor); newGroup='';">
            <div class="modal-body">
                <div class="row-fluid">
                    <div class="span3 offset3">
                        Group name
                    </div>
                    <div class="span6">
                        <input class="input-block-level" type="text" ng-model="newGroup">
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span3 offset3">
                        Group color
                    </div>
                    <div class="span6">
                        <select ng-model="newColor" class="input-block-level">
                            <option value="">None</option>
                            <option value="red">Red</option>
                            <option value="blue">Blue</option>
                            <option value="green">Green</option>
                            <option value="orange">Orange</option>
                            <option value="cyan">Cyan</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <input class="btn btn-primary" type="submit" value="Save changes">
            </div>
        </form>
    </div>
</div>

This is the line of interest:

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

These are my includes:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap.js"></script>
<script type="text/javascript" src="js/angular-ui-if.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.css">

Answer 1

This is the x in your code:

× U+00D7 MULTIPLICATION SIGN

When it should be

x U+0058 LATIN CAPITAL LETTER X.

Use the one on the keyboard.

Answer 2

Because your button text isn't "x". This can be seen even on this page, just press [ctrl]+[f] fill the search fild with "x" and press few times [f3]. Will be found all "x" on the page except your.