راهنمایی در مورد css

[reza_zamby 11]

سلام و عرض ادب

من یه shape رو که با css ایجاد شده میخوام توی یه متن به کار ببرم البته اندازش کوچیکه و هم اندازه متن هست و بزرگ نیست و مثل یه شکلک میمونه ولی هر جوری که در کنار متن قرارش میدم درست جا گذاری نمیشه و متن رو بسیار ریز نمایش میده . کدش رو در پایین قرار میدم اگر امکانش هست راهنمایی بفرمایید که چطور میتونم از این شی مثل یه symbol توی متن استفاده کنم. البته فقط یکبار میخوام اینکارو انجام بدم و توی یه ماژول بزارمش.

html code:

<div class="heart">
 		<span class="left"></span><br>
	<span class="right"></span>
</div>

css code:

.heart { 
 	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
}
.heart span {
	display: block;
	position: absolute;
 	width: 10em;
	height: 16em;
 	background-color: #c50011;
 -webkit-border-top-left-radius: 10em;
 -webkit-border-top-right-radius: 10em;
  -moz-border-radius-topleft: 10em;
  -moz-border-radius-topright: 10em;
 	border-top-left-radius: 10em;
	border-top-right-radius: 10em;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-direction: alternate;
}
.heart span.left {
 -o-transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
	left: 2.85em;
	bottom: 2.2em;
 -webkit-border-bottom-right-radius: 10em;
 -webkit-border-bottom-left-radius: 0;
 -moz-border-radius-topleft: 10em;
 -moz-border-radius-bottomleft: 0;
	border-bottom-right-radius: 10em;
	border-bottom-left-radius: 0;
 -webkit-animation-name: shadows-side;
}
.heart span.right {
 -o-transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
 -webkit-border-bottom-right-radius: 0;
 -webkit-border-bottom-left-radius: 10em;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 10em;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 10em;
	left: 7.1em;
	bottom: 2.2em;
   -webkit-animation-name: shadows;
}
.heart {
 -webkit-animation-name: beat;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-direction: alternate;
 color:red;
}
#colophon {
 color:#e1e1e1;
 position:fixed;
 bottom:5%;
 right: 0;
}
#colophon a{
 text-decoration: none;
 color: inherit;
}
@-webkit-keyframes shadows {
from {
   box-shadow: .4875em .1875em .1875em rgba(90, 90, 90, .5);
     }
to {
   box-shadow: .875em .3875em .4875em rgba(90, 90, 90, .35);
   }
}
@-webkit-keyframes shadows-side {
from {
   box-shadow: -.4875em .1875em .1875em rgba(90, 90, 90, .5);
}
to {
   box-shadow: -.0875em .3875em .4875em rgba(90, 90, 90, .35);
}
}
@-webkit-keyframes beat {
from {
-webkit-transform:scale(.12);
}
to {
 -webkit-transform: scale(.9);
}
}

[Vahid Taheri 74]

از وب فونت هایی مثل fontawesome میتونید استفاده کنید که اگر تنظیم بشه خیلی راحت تر این میشه و توی مانیتور ها و سیستم های مختلف بدون مشکل اجرا میشه.

اما اگر میخواید از این کد در سایتتون استفاده کنید ، باید ببینیم در سایتتون چطوری هست و متناسب با css های سایتتون مشکلتون رو برطرف کنیم