Question

我不明白为什么在浏览器中呈现html页面时看不到我的图标enveloppe。

来源：

    <!doctype html>

    <html>
        <head>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/3.3.7/css/font-awesome.min.css" rel="stylesheet" />
        <link href='http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600' rel='stylesheet'>

        <style>

            body {
                padding-top: 20px;
                font-size: 16px;
                font-family: "Open Sans",serif;
            }

            h1 {
                font-family: "Abel", Arial, sans-serif;
                font-weight: 400;
                font-size: 40px;
            }

            .margin-base-vertical {
                margin: 40px 0;
            }

        </style>   
    </head>

        <body>

        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">

                    <form class="margin-base-vertical">
                        <p class="input-group">
                            <span class="input-group-addon"><span class="icon icon-envelope"></span></span>
                            <input type="text" class="form-control input-lg" name="email" placeholder="webmaster@test.com" />
                        </p>
                        <p class="help-block text-center"><small>Subscribe.</small></p>
                        <p class="text-center">
                            <button type="submit" class="btn btn-success btn-lg">Submit</button>
                        </p>
                        </span>
                    </form>

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

Answer 1

试试这个：

  <!doctype html>

<html>
    <head>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600' rel='stylesheet'>

    <style>

        body {
            padding-top: 20px;
            font-size: 16px;
            font-family: "Open Sans",serif;
        }

        h1 {
            font-family: "Abel", Arial, sans-serif;
            font-weight: 400;
            font-size: 40px;
        }

        .margin-base-vertical {
            margin: 40px 0;
        }

    </style>   
</head>

    <body>

    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">

                <form class="margin-base-vertical">
                    <p class="input-group">
                        <span class="input-group-addon"><span class="fa fa-envelope"></span></span>
                        <input type="text" class="form-control input-lg" name="email" placeholder="webmaster@test.com" />
                    </p>
                    <p class="help-block text-center"><small>Subscribe.</small></p>
                    <p class="text-center">
                        <button type="submit" class="btn btn-success btn-lg">Submit</button>
                    </p>
                    </span>
                </form>

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

Answer 2

问题＃1

你的Font Awesome链接给我一个拒绝访问错误。试试这个链接：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

问题＃2

您要搜索的图标类别为fa和fa-envelope。

小提琴：https://jsfiddle.net/c2bwxd6c/

为什么我不能在我的bootstrap表单中看到icon-enveloppe

2 个答案: