خط عمودی فاصله دهنده بین دو کلمه رو با چه روشی ایجاد کنم بهتره؟

[davood59]

سلام دوستان؛
وقتتون بخیر.
به این شکل نگاه کنید لطفا:


126943

حالا به چیزی که من طراحی کردم نگاه کنید:



126944

اینهم کد html من:



<div id="namecompany">
<h1>کارگزاری <span>مفیــد</span><tt><tt>|</tt></tt>افتتاح حساب غیر حضوری </h2>
</div><!-- namecompany -->

و اینهم کد css مربوط به این بخش:


#namecompany h1{
margin-top:12px;
font-family:"B Yekan";
color:#7b828d;
font-weight:400;
font-size:19px;
direction:rtl;
margin-right:55px;
}
span{
color:#D80137;
margin:0px 2px;
}
الف) اگه بخوام اون خط عمودی رو دقیقا مثل اصلش پیاده کنم (از نظر ارتفاع) از تصویر استفاده کنم یا نه کد دیگه ای وجود داره؟
ب) من با تگ <tt> فاصله انداختم بین خط عمودی و نوشته ها؛ اگه بخوام این رو هم با css پیاده ش کنم به چه نحوی میشه؟
ممنونم.

[پیام حیاتی]

سلام
در اشکال fontawsome جستجو کنید و یا با تصویر.
Fontawsome رو در نت جستجو کنید.

[white tower]

The <tt> tag is not supported in HTML5. Use CSS instead.
با یه تگ خالی هم میشه درستش کرد . یه تگ خالی بذار display ش رو inline-block بذار.position رو relative کن . ارتفاعش رو هم هر جقد می خوای بذار. عرضش رو هم هر 2 پیکسل بذاری فک کنم جواب بده

[davood59]

سلام؛ سعی کردم از تگ خالی هم استفاده کنم ولی جالب نشد، احساس می کنم دارم اشتباه کار می کنم. لینک کدها رو بصورت Live تو این لینک (http://www.cssdesk.com/c3XFw) گذاشتم. امکانش هست نگاه کنید.