问答详情
源自：5-3 字体图标

当@font-face出现后第一个字体图标glyphicon-envelope出现问题是什么问题

<style>

.glyphicon-envelope{

color: red;

font-size: 100px;

}

@font-face{

font-family:'Glyphicons Halflings';

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

src:url(fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),

url(fonts/glyphicons-halflings-regular.woff2) format('woff2'),

url(fonts/glyphicons-halflings-regular.woff) format('woff'),

url(fonts/glyphicons-halflings-regular.ttf) format('truetype'),

url(fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}

</style>

</head>

<body>

<!--字体图标，放大不会失真bootstrap组件Glyphicons 字体图标；阿里巴巴矢量图标库-->

<span class="glyphicon glyphicon-envelope"></span>

<button class="btn btn-default">

<span class="glyphicon glyphicon-star"></span>这是一个按钮

</button>


提问者：慕丝1033313 2017-06-26 10:41

个回答

  • I小小白
    2017-08-23 23:56:30

    我是老师的写法改成这个就完美了<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  

    0
  • 慕丝1033313
    2017-06-29 19:20:55

    Failed to load resource: the server responded with a status of 404 (Not Found)

    这样的错误，如果将@font-face注释掉glyphicon-envelope这个就可以显示，但是star就不能显示了

    <link rel="stylesheet" type="text/css" href="css/css/bootstrap.min.css"/>

    .glyphicon-envelope{

    color: red;

    font-size: 100px;

    }

    @font-face{

    font-family:'Glyphicons Halflings';

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

    src:url(fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),

    url(fonts/glyphicons-halflings-regular.woff2) format('woff2'),

    url(fonts/glyphicons-halflings-regular.woff) format('woff'),

    url(fonts/glyphicons-halflings-regular.ttf) format('truetype'),

    url(fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}

    </style>

    </head>

    <body>


    <span class="glyphicon glyphicon-envelope"></span>

    <button class="btn btn-default">

    <span class="glyphicon glyphicon-star"></span>这是一个按钮

    </button>

    </body>

    0
  • qq_伊璐_0
    2017-06-28 11:01:53

    出现问题报错是怎么说的呢？ 复制你的代码，这样写是没有出现问题的

    <link rel ="stylesheet" href="css/bootstrap.min.css">

    <style>

    .glyphicon-envelope{

    color: red;

    font-size: 30px;

    }

    </style>

    </head>

    <body>

    <span class="glyphicon glyphicon-envelope"></span>

    <button class="btn btn-default">

    <span class="glyphicon glyphicon-star"></span>这是一个按钮

    </button>

    </body>

    </html>

    0