💻 آخرین فرصت یادگیری برنامه‌نویسی با آفر ویژه قبل از افزایش قیمت در ۵ آذر ماه (🎁 به همراه یک هدیه ارزشمند )
۰ ثانیه
۰ دقیقه
۰ ساعت
۸ rojin
خدا قوت ..سوالم راجب منو
سحر پاشائی حل شده توسط سحر پاشائی

سلام خدمت منتور گرامی.....در قسمت منو ایمیلم به صورت حروف لاتین بزرگ نمایش داده میشه.....کدم رو قرار میدم مشکلش

    </div>

<!DOCTYPE html>
<html lang="fa" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>صفحه اصلی</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
    />
    <link rel="stylesheet" href="assets/css/style-gride-system.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>
    <div class="container-fluid container-fluid-custom">
      <div class="row">
        <div class="container">
          <div class="col-xs-6 col-s-6 col-md-6 col-l-16 col-xl-6 contact">
            <i class="fa-regular fa-envelope xs-hidden"><span>rojin.nejati111@gmail.com</span></i>
            <i class="fa-solid fa-phone"><span>09219758476</span></i>
          </div>
          <div class="col-xs-6 col-s-6 col-md-6 col-l-6 col-xl-6 social-media">
            <a class="xs-hidden" href=""><i class="fab fa-facebook"></i></a>
            <a href=""><i class="fab fa-telegram"></i></a>
            <a href=""><i class="fab fa-instagram"></i></a>
            <a class="xs-hidden" href=""><i class="fab fa-twitter"></i></a>
            <a href=""><i class="fas fa-rss"></i></a>
          </div>
        </div>
      </div>
    </div>
    <script src="assets/js/main.js"></script>
  </body>
</html>

سلام. وقتتون بخیر
تگ spanی که ایمیلتون رو داخلش قرار دادید رو بیرونِ تگ i بذارید مشکل حل می‌شه. پیشنهاد می‌شه متنون رو داخل تگ آیکون قرار ندید.

سحر پاشائی ۰۳ آبان ۱۴۰۳، ۰۴:۳۸

خانوم پاشائی بنده همینکارو انجام دادم حالا دیگه با حروف بزرگ لاتین نشون نمیده ولی ترتیب قرار گرفتن ایکون وایمیل و شماره موبایل درست نیست

 <div class="col-xs-6 col-s-6 col-md-6 col-l-16 col-xl-6 contact">
           <i class="fa-regular fa-envelope xs-hidden"></i><span>rojin.nejati111@gmail.com</span>
           <i class="fa-solid fa-phone"></i><span>09219758476</span>
          </div>
rojin ۰۳ آبان ۱۴۰۳، ۰۷:۰۲

برای من به این صورت نشون داده می‌شد (همه چیز به همون ترتیبی هست که در فایل HTML کد زدید):

RP1Z3cdu6pCvrUeP.png

و بعد از تغییر این بخش به این صورت:

          <div class="col-xs-6 col-s-6 col-md-6 col-l-16 col-xl-6 contact">
            <i class="fa-regular fa-envelope xs-hidden"
              ></i
            >
            <span>rojin.nejati111@gmail.com</span>
            <i class="fa-solid fa-phone"><span>09219758476</span></i>
          </div>

نتیجه تغییری نکرد. 

به صورت کلی اگر برای یک متن به خصوصی مثل ایمیل، شماره تلفن و.. می‌خواید آیکون بذارید، آیکون جدا باشه و بعدش در یک span یا div و... متنتون رو بذارید و برای این که کنار هم قرار بگیرن باید دو آیتمون (مثلا آیکون ایمیل و متن ایمیل) در یک رپری قرار بگیرن و به رپر display: flex بدید و بقیه تنظیمات...

اگر هنوز مشکلی هست لطفا کدتون رو به صورت کامل (+فایل استایل‌ها) قرار بدید و ترجیحا یک اسکرین شات از خروجی و بفرمایید مشکلش چی هست و دقیقا می‌خواید به چه صورت قرار بگیره.

سحر پاشائی ۰۳ آبان ۱۴۰۳، ۱۲:۰۲ 
<!DOCTYPE html>
<html lang="fa">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>صفحه اصلی</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
    />
    <link rel="stylesheet" href="assets/css/style-gride-system.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>
    <!-- start contact section -->
    <div class="container-fluid container-fluid-custom">
      <div class="row">
        <div class="container">
          <div class="col-xs-6 col-s-6 col-md-6 col-l-16 col-xl-6 contact">
           <i class="fa-regular fa-envelope xs-hidden"></i><span>rojin.nejati111@gmail.com</span>
           <i class="fa-solid fa-phone"></i><span>09219758476</span>
          </div>
          <div class="col-xs-6 col-s-6 col-md-6 col-l-6 col-xl-6 social-media">
            <a class="xs-hidden" href=""><i class="fab fa-facebook"></i></a>
            <a href=""><i class="fab fa-telegram"></i></a>
            <a href=""><i class="fab fa-instagram"></i></a>
            <a class="xs-hidden" href=""><i class="fab fa-twitter"></i></a>
            <a href=""><i class="fas fa-rss"></i></a>
          </div>
        </div>
      </div>
    </div>
    /* .start contact section style */
.container-fluid-custom{
    background-color:darkblue ;
    color: #fff;
    height: 40px;
}
.container-fluid-custom .contact{
    font-size: 15px;
    height: 40px;
}
.container-fluid-custom .contact i{
    color: orange;
    margin-right: 20px;
    vertical-align: -13px;
}
.container-fluid-custom .contact span{
    color: #fff;
    vertical-align: -13px;
}
.container-fluid-custom .social-media{
    direction: ltr;
}
.container-fluid-custom .social-media i{
    vertical-align:-5px;
    margin-right: 6px;
    padding:12px;
    width: 40px;
}
.container-fluid-custom .social-media a{
    color: #fff;
}
.container-fluid-custom .social-media i:hover{
   background-color: orange;
}
row{
    height: 40px;
}
.col-xs-6 col-s-6 col-md-6 col-l-16 col-xl-6 contact {
   display: flex;
}
/* .end contact section style */
rojin ۰۵ آبان ۱۴۰۳، ۰۷:۳۴

https://s8.uupload.ir/files/screenshot_2024-10-26_110421_fcix.png

rojin ۰۵ آبان ۱۴۰۳، ۰۷:۳۶

خانوم پاشائی عزیز آیکون ایمیل و تلفن کنار ایمیل مورد نظر و شماره همراه قرار نمیگیرن و جابجاس! مشکلم اینه هرکاری میکنم جاشون درست نمیشه....

rojin ۰۵ آبان ۱۴۰۳، ۰۷:۳۷

درود. این کد رو جایگزین کنید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>صفحه اصلی</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
    />
    <link rel="stylesheet" href="assets/css/style-gride-system.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    <!-- start contact section -->
    <div class="container-fluid container-fluid-custom">
      <div class="row">
        <div class="container">
          <div class="col-xs-6 col-s-6 col-md-6 col-l-16 col-xl-6 contact">
            <i class="fa-solid fa-phone"></i>
            <span>09219758476</span>
            <i class="fa-regular fa-envelope xs-hidden"></i>
            <span>rojin.nejati111@gmail.com</span>
          </div>
          <div class="col-xs-6 col-s-6 col-md-6 col-l-6 col-xl-6 social-media">
            <a class="xs-hidden" href=""><i class="fab fa-facebook"></i></a>
            <a href=""><i class="fab fa-telegram"></i></a>
            <a href=""><i class="fab fa-instagram"></i></a>
            <a class="xs-hidden" href=""><i class="fab fa-twitter"></i></a>
            <a href=""><i class="fas fa-rss"></i></a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
بهترین پاسخ
سحر پاشائی ۰۵ آبان ۱۴۰۳، ۰۹:۱۵

مرسی بزرگوار

rojin ۰۵ آبان ۱۴۰۳، ۱۳:۲۷
ورود/افزودن پاسخ
ورود/افزودن پاسخ
مشارکت کنندگان در این تاپیک سحر پاشائی rojin
سوالات مرتبط با این تاپیک
  • نصب اکستنشن ویژوال استودیو کد ( ۶ پاسخ )
  • تقویت زبان در حوزه طراحی وب ( ۳ پاسخ )
  • برنامه ویژوال استودیو ( ۳ پاسخ )
  • دستورات مقدماتی emmet
  • مشکل در عملکرد افزونه prettier در VSCode ( ۲ پاسخ )