در کدی که نوشتم از font icon از سایت fontello استفاده کردم اما آیکون ها شکل خودشون رو ندارن، کلا شکل مشخصی ندارند
اشکال کارم کجاست؟
کد HTML:
<html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="resume.css"> <!--<link type="text/css" rel="stylesheet" href="css/fontello-ie7.css">--> </head> <body> <div class="resume"> <div class="in-content"> <p class="resume-title"> رزومه خود را کامل کنید </p> <p class="num-question"> 1 سوال از 18 </p> <div class="deg"> <div class="deg-1"><img src="image/progress_bar_deg-.png" /></div> <div class="rotate-deg"><img class="rotate-1" src="image/deg-.png" /></div> <div class="rotate-bar"><img class="rotate-2" src="image/deg-cmp.png" /></div> </div> <p class="resume-p"> با کامل کردن اطلاعات پروفایل خود، احتما دعوت به کارتان را از سویکارفرمایان را بالا ببرید. </p> <p class="information"> چه اطلاعاتی مورد نیاز است؟ </p> <p class="question"> وضعیت سربازی شما چگونه است؟ </p> <button type="button" class="next button"><i class="icon-right-open"></i></button> <button type="button" class="back button"><i class="icon-left-open"></i></button> <button type="button" class="cancel button"><i class="icon-cancel"></i></button> <button type="button" class="input button"> ورود اطلاعات </button> </div> </div> </body></html>
@font-face{
font-family:'B Yekan';
src: url("../font/BYekan.eot") format("eot") , url("../font/BYekan.woff") format("woff") , url("../font/BYekan.ttf") format("ttf");
}
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?89078439');
src: url('../font/fontello.eot?89078439#iefix') format('embedded-opentype'),
url('../font/fontello.woff?89078439') format('woff'),
url('../font/fontello.ttf?89078439') format('truetype'),
url('../font/fontello.svg?89078439#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?89078439#fontello') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-mail:before { content: '\e800'; } /* '' */
.icon-mail-circled:before { content: '\e801'; } /* '' */
.icon-mail-1:before { content: '\e802'; } /* '' */
.icon-right-open:before { content: '\e803'; } /* '' */
.icon-left-open:before { content: '\e804'; } /* '' */
.icon-cancel:before { content: '\e805'; } /* '' */
[class^="icon-"], [class*=" icon-"] {
font-family: 'fontello';
font-style: normal;
font-weight: normal;
/* fix buttons height */
line-height: 1em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
}
.icon-mail { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-mail-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-mail-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-right-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-left-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
body{
margin:0 auto;
background-color:#e2e2e2;
direction:rtl;
}
.resume{
height:396px;
width:302px;
background-color:#69308e;
position:relative;
float:right;
border-radius:5px;
right:120px;
top:510px;
}
.in-content{
position:absolute;
width:260px;
height:100%;
right:18px;
}
.resume-title{
color: #fff;
font-family: B Roya;
font-size: 15px;
position: absolute;
float: right;
right:0px;
top: 20;
margin: 0px;
}
.num-question{
color:#0e0116;
font-family:B Roya;
font-size:15px;
position:absolute;
float:left;
left:0px;
top:20px;
margin:0px;
}
.deg{
height:83px;
width:155px;
position:relative;
top:70px;
right:56px;
}
.deg img{
position:absolute;
}
.deg-1{
position:absolute;
}
.rotate-deg{
position: absolute;
right: 64px;
bottom: 40px;
}
.rotate-bar{
position: absolute;
right: -11px;
top: -8px;
height: 93px;
width: 110%;
overflow: hidden;
}
.rotate-1{
transform:rotate(30deg);
}
.rotate-2{
transform:rotate(30deg);
}
.resume-p{
font-family:B Yekan;
font-size:13px;
color:#fff;
text-align:right;
position:absolute;
right:0px;
top:190px;
margin:0px;
}
.information{
position:absolute;
float:right;
right:0px;
font-family:B Roya;
font-size:15px;
color:#fff;
font-weight:bold;
top:250px;
margin:0px;
}
.question{
position:absolute;
float:right;
right:0px;
font-family:B Yekan;
font-size:15px;
color:#2d0249;
top:285px;
margin:0px;
}
.button{
border:none;
cursor:pointer;
outline:none;
}
.next{
position:absolute;
border-radius:3px;
background-color:#552375;
right:0px;
top:343px;
margin:0px;
height:33px;
width:33px;
}
.back{
position:absolute;
border-radius:3px;
background-color:#552375;
right:36px;
top:343px;
margin:0px;
height:33px;
width:33px;
}
.cancel{
position:absolute;
border-radius:3px;
background-color:#552375;
left:107px;
top:343px;
margin:0px;
height:33px;
width:33px;
}
.input{
position:absolute;
border-radius:3px;
background-color:#fff;
left:0px;
top:343px;
margin:0px;
height:33px;
width:103px;
font-family:B Yekan;
font-size:15px;
color:#4e1e6e;
}
