Unable To Retrieve Glyphicon-Asteric In Textboxfor For First Time Page Load, Did I Missed Any Reference, Using Formvalidation With Same Code Is Also Not Working

@Scripts.Render("~/bundles/jqueryval")
@using (Html.BeginForm("DetailsForm", "Home", FormMethod.Post, new { id = "contactForm" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Form</h4>
        <hr />


        <div class="container">

<div class="row">
                <div class="form-group col-md-6">
                    @Html.LabelFor(model => model.Topic, new { @class = "control-label col-md-4" })
                    <div class="col-md-8">
                        @Html.TextBoxFor(model => model.Topic, new { @class = "glyphicon form-control Topic" })
                        @Html.ValidationMessageFor(model => model.Topic, "*")
                    </div>
                </div>
                <div class="form-group col-md-6">
                    @Html.LabelFor(model => model.LeadSource, new { @class = "control-label col-md-4" })
                    <div class="col-md-8">
                        @Html.DropDownListFor(model => model.LeadSource, new List<SelectListItem> {
                                   new SelectListItem {Text="Exp1", Value="Exp1"},
                                   new SelectListItem {Text="Exp2", Value="Exp2"}
                            }, "Select Item", new { @class = "glyphicon form-control LeadSource" })
                        @Html.ValidationMessageFor(model => model.LeadSource, "*")
                    </div>
                </div>
            </div>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrapvalidator.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<script src="~/Scripts/bootstrapvalidator.min.js"></script>
<script src="~/Scripts/jquery.formvalidator.min.js"></script>
<script src="~/Scripts/mandatoryIcon.min.js"></script>

<script src="~/Scripts/jquery-ui-1.10.4.js"></script>

$(document).ready(function () {
    $('#contactForm').bootstrapValidator({
        container: '#messages',
        feedbackIcons: {
            required: 'glyphicon glyphicon-asterisk',
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },

        Icons: {
            required: 'glyphicon glyphicon-asterisk',
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
         addOns: {
                mandatoryIcon: {
                    icon: 'glyphicon glyphicon-asterisk'
                }
            },
        //framework: 'bootstrap',
        icon: {
            required: 'fa fa-asterisk',
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
        },

        fields: {
            Topic: {
                validators: {
                    notEmpty: {
                        message: 'Topic is required and cannot be empty'
                    }
                }
            },