我试图显示我的网页的徽标标题，但有些字母不会出现在其上。
示例：
It shows "ECHAMPION" entirely because the uppercases appear
我首先尝试使用大写字母，但只有那些东西我无法找到解决方案。
我试图删除＆＃34; icon-shield＆＃34;在h1标签中的类，但它没有解决问题，我再次写下来。然后我试图删除＆＃34; bl-logo＆＃34;上课，同样，没什么。然后我试图删除它们，它工作了!!我再把它们写下来，我试着在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";
}
答案 0 :(得分：0)
我已经解决了再次下载图标包的问题。也许我在这个过程中做错了什么。