html - 有些字母没有出现 html

标签 html css

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

例子:

Doesn't show "eChampion"

It shows "ECHAMPION" entirely because the uppercases appear

我首先尝试使用大写字母，但仅使用大写字母我找不到解决方案。
我尝试去掉h1标签中的“icon-shield”类，但并没有解决问题，我又记下来了。然后我试图删除“bl-logo”类，同样，什么也没有。然后我试着把两者都去掉，结果成功了!!我又把它们写下来，我试图在 css 页面中删除它们，但是没有用...

我是 html 和 css 的初学者，所以我选择了 <section> 的网格布局示例。 .我得到了这个例子并改变了很多东西。所有 <section>标签带有“bl-box”类和“bl-icon”类。但是对于 Logo ，我希望它更大，并根据屏幕尺寸进行 2 次转换而不是 1 次转换，因此我制作了 2 个类似的类，称为“bl-box-logo”和“bl-logo”。一切正常。

当我添加名为“games.html”的第二个页面时，我想要另一个图标，所以我下载了我拥有的相同图标包，但多了一个。然后我更改了“字体”文件夹中的文件以添加新图标。突然在主页上出现这个错误，现在我不知道如何解决。我在任何地方都没有找到任何东西。令人沮丧:(

-->这里是html代码:

<!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代码:

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 - 有些字母没有出现 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43021719/

上一篇：jquery - 在 div 内设置边框样式

下一篇：html - 向下滚动时显示在固定标题上方的图像和文本

相关文章：

javascript - 为什么它以随机顺序初始化这个 Knockout.js 组件？

html - 当我尝试从 Sublime text 2 编译时，我的 sass 没有编译？

javascript - HighCharts Semi-Circle-Donut，去除边距和填充

javascript - 如何限制用户访问 ExpressJS/NodeJS 中的静态 html 文件？

html - 我的一个段落不会向左浮动以与其他段落保持一致

JavaScript setTimeout 循环仅在返回错误 : 之前运行两次

javascript - 将 YouTube 嵌入从列表中选择的视频

css - 网页的 slider 蓝图模板

javascript - 网络 : how to zoom into a grid item and keep the item centralized in the viewport

php - 开源网站

©2024 IT工具网  联系我们