文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >某些字母不会显示为html

问某些字母不会显示为html
EN

Stack Overflow用户
提问于 2017-03-26 04:39:17
回答 1查看 133关注 0票数 0

我正在尝试显示我的网页的徽标标题，但一些字母没有显示在上面。

示例：

Doesn't show "eChampion"

It shows "ECHAMPION" entirely because the uppercases appear

我首先尝试了大写字母，但我找不到解决方案。

我试图删除h1标记中的“图标-屏蔽”类，但是没有解决这个问题，我重新写了一遍。然后我试着删除"bl-logo“类，同样，什么也没有。然后我试着把这两个都去掉，它起作用了！我再次写下它们，并试图在css页面中删除它们，但不起作用……

我是一个html和css的初学者，这就是为什么我选择了一个使用<section>的网格布局的例子。我得到了这个例子，并改变了很多东西。所有的图标标签都带有“bl- <section>”类和“bl-”类。但是对于徽标，我希望它更大，并且根据屏幕的大小进行2次过渡而不是1次过渡，所以我做了两个类似的类，分别称为"bl-box- logo“和"bl-logo”。一切都成功了。

当我添加了名为"games.html“的第二个页面时，我希望有另一个图标，所以我下载了与我已有的相同的图标包，但增加了一个图标。然后我更改了"fonts“文件夹中的文件，只是为了添加新的图标。突然，这个错误出现在主页上，现在我不知道如何解决它。我什么都没找到。令人沮丧的是：

-->这里有html代码：

代码语言：javascript
复制
<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <link href="css/grid.css" rel="stylesheet">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
    <script src="js/modernizr.custom.js"></script>

  </head>

  <body>
      <div class="container">
        <div id="bl-main" class="bl-main">
            <section>
                <div class="bl-box-logo">
                    <a href="layout.html">
                        <h1 class="bl-logo icon-shield">eChampion</h1>
                    </a>
                </div>
            </section>
            <section>
                <div class="bl-box">
                    <h2 class="bl-icon icon-trophy">Tournaments</h2>
                </div>
            </section>
            <section>
                <div class="bl-box">
                    <h2 class="bl-icon icon-users">Teams</h2>
                </div>
            </section>
            <section>
                <div class="bl-box">
                    <a href="games.html">
                        <h2 class="bl-icon icon-rocket">Games</h2>
                    </a>
                </div>
            </section>
            <section>
                <div class="bl-box">
                    <h2 class="bl-icon icon-bubbles2">Contact</h2>
                </div>
            </section>
            <section id="bl-main-sec6" class="bl-main-sec6">
                <section>
                    <div class="bl-box">
                        <h2 class="bl-icon">About</h2>
                    </div>
                </section>
                <section>
                    <div class="bl-box">
                        <h2 class="bl-icon">Login/Logup</h2>
                    </div>
                </section>
            </section>
        </div>
      </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <script src="js/boxlayout.js"></script>
      <script src="liga.js"></script>
  </body>
</html>

-->这里有css代码：

代码语言：javascript
复制
body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #ffffff;
    background: #333;
    font-size: 0.9em;
    font-weight: 300;
}
a {
    color: #f0f0f0;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 0 5px;
    margin-right: 35px;
    font-size: 100%;
}

.container { height: 100%; }
/*Container layout distribution*/
.bl-main {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bl-main > section {
    position: absolute;
    width: auto;
    height: 50%;
}

.bl-main > section:first-child {
    top: 0;
    left: 0;
    width: 27.5%;
    background: white;
}

.bl-main > section:nth-child(2) {
    top: 0;
    left: 27.5%;
    width: 47.5%;
    background: #005FBF;
}

.bl-main > section:nth-child(3) {
    top: 0;
    left: 75%;
    width: 25%;
    background: #F5A44D;
}

.bl-main > section:nth-child(4) {
    top: 50%;
    left: 0;
    width: 40%;
    background: #FC4C46;
}

.bl-main > section:nth-child(5) {
    top: 50%;
    left: 40%;
    width: 30%;
    background: #7CD175;
}

.bl-main > section:nth-child(6) {
    top: 50%;
    left: 70%;
    width: 30%;
    background: #E4E500;
}

.bl-main-sec6 {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bl-main-sec6 > section {
    position: absolute;
    width: 100%;
    height: 50%;
}

.bl-main-sec6 > section:first-child {
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #E4E400;
}

.bl-main-sec6 > section:nth-child(2){
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    background: #1E4072;
}
/*Finish of container layout distribution*/

/*Icons responsive customization*/
.bl-box {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 1;
    /* Centering with flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.bl-box h2 {
    text-align: center;
    margin: 0;
    padding: 20px;
    width: 100%;
    font-size: 1.8em;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
}
/*Logo responsive customization*/
.bl-box-logo {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 1;
    /* Centering with flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.bl-box-logo h1 {
    text-align: center;
    margin: 0;
    padding: 20px;
    width: 100%;
    font-size: 3.6em;
    letter-spacing: 2px;
    font-weight: 700;
}

.bl-icon {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
}

.bl-icon:before {
    display: block;
    font-size: 2em;
    margin-bottom: 10px;
}

.bl-logo {
    color: #000000;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
}

.bl-logo:before {
    display: block;
    font-size: 2em;
    margin-bottom: 10px;
}




/* Custom content */

.bl-content h2 {
    font-size: 3em;
    font-weight: 300;
    margin: 0 0 20px 0;
}

/* Transition classes and properties */
/* Separated for a better overview and control */

/* h2 transition*/
.bl-box h2 {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.no-touch section:not(.bl-expand) .bl-box:hover h2 {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
}
/* h1 transition*/
.bl-box-logo h1 {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.no-touch section:not(.bl-expand) .bl-box-logo:hover h1 {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
}

/*Everything gets smaller*/
@media screen and (max-width: 46.5em) {
    .container,
    .bl-box {
        font-size: 75%;
    }

}
/*Just the Logo gets smaller*/
@media screen and (max-width: 65em) {
    .bl-box-logo {
        font-size: 75%;
    }
}

/*Icons StyleSheet*/
@font-face {
  font-family: 'icomoon';
  src:  url('../eFonts/icomoon.eot');
  src:  url('../eFonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../eFonts/icomoon.ttf') format('truetype'),
    url('../eFonts/icomoon.woff') format('woff'),
    url('../eFonts/icomoon.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-undo2:before {
  content: "\e967";
}
.icon-bubbles2:before {
  content: "\e96d";
}
.icon-users:before {
  content: "\e972";
}
.icon-trophy:before {
  content: "\e99e";
}
.icon-rocket:before {
  content: "\e9a5";
}
.icon-shield:before {
  content: "\e9b4";
}
html
css
EN

回答 1

Stack Overflow用户

发布于 2017-03-26 23:03:57

我已经解决了下载图标包的问题。也许我在这个过程中做错了什么。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43021719

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档