有些字母不会出现html

时间:2017-03-25 20:39:17

标签: html css

我试图显示我的网页的徽标标题,但有些字母不会出现在其上。

示例:

Doesn't show "eChampion"

It shows "ECHAMPION" entirely because the uppercases appear

我首先尝试使用大写字母,但只有那些东西我无法找到解决方案。
我试图删除" icon-shield"在h1标签中的类,但它没有解决问题,我再次写下来。然后我试图删除" bl-logo"上课,同样,没什么。然后我试图删除它们,它工作了!!我再把它们写下来,我试着在css页面中删除它们,但它没有工作......

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

当我添加第二页名为&#34; games.html&#34;我想要另一个图标,所以我下载了相同的图标包,但我还有一个图标。然后我更改了文件夹中的文件&#34; fonts&#34;只是添加新图标。突然,这个错误发生在主页上,现在我不知道如何解决它。我在任何地方都找不到任何东西。令人沮丧的是:(

- &gt;在这里您已获得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>

- &gt;在这里您已获得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";
}

1 个答案:

答案 0 :(得分:0)

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