مشکل راستچین کردن شبکه‌های اجتماعی

سلام. روزتون بخیر

2 تا مشکل دارم داخل برنامه vscode

1- زمانی که آیکن میزارم و محتوای متنی چه داخل تگ (span) چه خود آیکن (i) میزارم. از فونت ایران سنس پشتیبانی نمیکنه و فونت پیشفرض خودش رو میزاره.

2- شبکه‌های اجتماعی چپ چین نمیشن. دقیقا طبق دوره و طبق آموزش‌ها پیشرفتم ولی وقتی مقادیر(col-s-6 الی col-xl-6) به (div.social-media) میدم استایلش کلا به هم میریزه و میاد لاین بعدی.

تصویر بعدی به هم ریختگی آیکن

لینک : https://codepen.io/sadeghk1a/pen/gOBwoxv

هیچ جوره چپ چین نمیشه.

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

الان گیر کردم نمیتونم جلسه بعد رو ببینم.

صادق کیامرزی ۰۳ اردیبهشت ۱۴۰۲، ۰۷:۲۰

درود عیدتون مبارک

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

ممنون از شکیبایی تون

نازنین کریمی مقدم ۰۳ اردیبهشت ۱۴۰۲، ۲۰:۴۸

ممنون.

هرچقدر فکر کرم نفهمیدم مشکل از کجاست. ما هم که مبتدی و تازه کار فقط به ذهنم رسید که گرید سیستم رو چک کنم. باز هم نتونستم بفهمم مشکل از چیه.

صادق کیامرزی ۰۴ اردیبهشت ۱۴۰۲، ۱۳:۲۲

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

1. درمورد نشناختن فونت، بهتره که در استایل به تمامی المانها به این صورت فونت بدید:

*{font-family: IRANSansXFaNum !important;}

این روش بالا خوبه اما باعث بهم ریختن سایر فونتها و آیکونها میشه. بنابراین بهتره که یه فونت واحد داشته باشید و اونجاهایی که نیاز هست تغییر پیدا کنه رو جدا مدیریت کنید. مثلا ممکنه بخواید برای همون آدرس ایمیل یه فونت دیگه ای تعریف کنید. در این صورت کافیه به اون تگ استایل جداگونه بدید:

در html:

 <i class="fa-solid fa-envelope"><span class="nk">sadeghk76ia@gmail.comspan>i>

و در css:

.nk{
  font-family: IRANSansXFaNum !important;
}

2. درمورد چپ چین بخش استایل تون کامل نیست. ابعاد col-6 و.. تعریف نشده و بخش body و * هم به درستی تعریف نشده. میتونید پروژه رو از جلسه آخر همین سرفصل دانلود کنید و کدتون رو با استاد چک بزنید.

نازنین کریمی مقدم ۰۴ اردیبهشت ۱۴۰۲، ۱۵:۴۵

یه بررسی میکنم اگه سوالی داشتم داخل همین تیکت میپرسم.

ممنون بابت وقتی که گذاشتین.

صادق کیامرزی ۰۴ اردیبهشت ۱۴۰۲، ۱۶:۱۲

خواهش میکنم

اگر بررسی کردید و اوکی بود یادتون نره که تیک تایید پاسخ رو بزنید.

برقرار باشید

نازنین کریمی مقدم ۰۴ اردیبهشت ۱۴۰۲، ۱۷:۴۷

خواهش میکنم

اگر بررسی کردید و اوکی بود یادتون نره که تیک تایید پاسخ رو بزنید.

برقرار باشید

نازنین کریمی مقدم ۰۴ اردیبهشت ۱۴۰۲، ۱۷:۴۷

سلام. خسته نباشید.

https://codepen.io/sadeghk1a/pen/OJBgjWJ

یک بار با دقت پیاده کردم پروژه رو و نتیجه گرفتم. ولی یه مشکلی راجب نمایش ایکن‌ها دارم.

آیکون‌های سایت مورد نظر رو هم به صورت لینک و هم به صورت اسکریپت پیاده کردم ولی فونت‌ها رو مرور گر نمیخونه.

صادق کیامرزی ۰۷ اردیبهشت ۱۴۰۲، ۱۷:۴۶

درود

ببینید همونطور که در کامنت قبلی هم گفتم، این روش بالا خوبه اما باعث بهم ریختن سایر فونتها و آیکونها میشه. بنابراین بهتره که یه فونت واحد داشته باشید و اونجاهایی که نیاز هست تغییر پیدا کنه رو جدا مدیریت کنید.

مثلا اینجا باید فونت آیکونها رو fontawesome بذارید وگرنه میاد از ایران سنس میخونه و متوجه نمیشه:

i{
  font-family: Font Awesome\\ 5 Free !important;
}

به جز این، در کد شما کلا شیوه آیکون دادن در html هم اشتباهه.

New in Font Awesome 5 is the fas prefix, Font Awesome 4 uses fa.

بی زحمت این لینک در سایت w3 رو ببینید. آیکونی که شما دادید اینه:

<i class="fa-solid fa-envelope xs-hidden"><span>sadeghk76ia@gmail.comspan>i>

در صورتی که باید این باشه:

<i class="fas fa-envelope xs-hidden"><span>sadeghk76ia@gmail.comspan>i>

نازنین کریمی مقدم ۰۸ اردیبهشت ۱۴۰۲، ۲۱:۱۶

ببخشید. یه مقدار بیشتر توضیح میدین لطفا.

چیزی که آموزش داده شده به صورت زیره :

font-family: IRANSansX !important;

ولی به این صورت نوشتین.

font-family: Font Awesome\\ 5 Free !important;

یعنی اگه قراره یه متنی درون تگ

گذاشته شه باید بیام و به این تگ مقدار زیر رو بدم ؟؟؟

p {
font-family: IRANSansX !important;
}

نمیشه (Font-Family) ثابت باشه

صادق کیامرزی ۱۰ اردیبهشت ۱۴۰۲، ۱۳:۵۶

درود

چون تاپیک خیلی طولانی شده بود و درست لود نمیشد مجبور شدم چندتا کامنت رو پاک کنم اما نگران نباشید خوندمشون.

ببینید من کد شما رو تغییر ندادم. به استایل همون کدپنی که فرستاده بودید تگ i رو اضافه کردم. در کامنت قبل گفتم اینکه یک فونت فمیلی ثابت مثل ایران سنس درنظر بگیرید اوکی هست منتها آیکونها بهم میریزند و با همون تگ i مشکل حل میشه.

درمورد اینکه آیکونها یسری شون نمایش داده نمیشه توضیح دادم که شیوه آیکون دهی تون در html اشتباه هست و یه نمونه آیکون پاکت نامه رو هم فرستادم. اون شیوه ای که شما باهاش آیکون میدید برای ورژن 4 هست. اگر بخواید کار کنه باید لینک ورژن 4 رو قرار بدید.

کامنتها رو با حوصله بیشتری بخونید و اگر حس میکنید توضیحاتم براتون گیج کننده هست بفرمایید که شما رو به سرپرستی ارجاع بدم.

نازنین کریمی مقدم ۱۲ اردیبهشت ۱۴۰۲، ۰۷:۱۲

فایل html پروژه منو. کاملا مشابه استاد پیش رفتم. آیکون خونده نمیشه.

این لینک در سایت w3 رو هم بررسی میکنم و اطلاع میدم.

html>
<html lang="fa">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>طراحی صفحه نخستtitle>
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous" />
    <link rel="stylesheet" href="assets/css/grid-system.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
  head>
  <body>
    <div class="container-fuild container-fuild-custom">
      <div class="row">
        <div class="container">
          <div class="col-xs-6 col-md-6 col-l-6 col-xl-6 contact">
            <i class="fa-solid fa-envelope xs-hidden"
              ><span>sadeghk76ia@gmail.comspan>i>
            <i class="fa-solid fa-phone"><span>09136666666span>i>
          div>
          <div class="col-xs-6 col-md-6 col-l-6 col-xl-6 social-media">
            <a href="" class="xs-hidden"><i class="fa-brands fa-facebook"i>a>
            <a href="" class="xs-hidden"><i class="fa-brands fa-twitter">a>
            <a href=""><i class="fa-brands fa-linkedin-in">i>a>
            <a href=""><i class="fa-brands fa-whatsapp">i>a>
            <a href=""><i class="fa-brands fa-telegram">i>a>
          div>
        div>
      div>
    div>
    <script src="assets/js/main.js">script>
  body>
html>

صادق کیامرزی ۱۲ اردیبهشت ۱۴۰۲، ۱۷:۱۷

این هم فایل style پروژه. کاملا مشابه استاد. و استایلی که برای آیکن بود اضافه کردم.

i{
  font-family: Font Awesome\\ 5 Free !important;
}

*,
body {
  font-family: IRANSansX !important;
  direction: rtl;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ol,
ul,
li {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea {
  font-family: IRANSansX !important;
}
h1 {
  font-weight: bold;
}
i {
  font-family: Font Awesome/ 5 Free !important;
}
/* start contant section styles */
.container-fuild-custom {
    background-color: darkblue;
    color: #fff;
    height: 40px;
}
.container-fuild-custom .contact {
    font-size: 15px;
}
.container-fuild-custom .contact i {
    color: orange;
    vertical-align: -10px;
    margin-right: 15px;
}
.container-fuild-custom .contact span {
    color: #fff;
    margin: 5px;
    vertical-align: 1px;
}
.container-fuild-custom .social-media {
    direction: ltr;
}
.container-fuild-custom .social-media i {
    vertical-align: -6px;
    margin-right: 6px;
    padding: 10px;
    width: 40px;
}
.container-fuild-custom .social-media i:hover {
    background-color: orange;
}
.container-fuild-custom .social-media a {
    color: #fff;
}
/* end contant section styles */

صادق کیامرزی ۱۲ اردیبهشت ۱۴۰۲، ۱۷:۲۰

به این صورت پیشنهاد دادین آیکن اضافه کنم.

<i class="fas fa-envelope xs-hidden"><span>sadeghk76ia@gmail.comspan>i>

بنده هم دقیقا به همین صورت آیکن رو اضافه کردم.

<i class="fas fa-envelope xs-hidden"><span>sadeghk76ia@gmail.comspan>i>

لطفا این پروژه رو بررسی کنید و نظرتون رو بگید

صادق کیامرزی ۱۲ اردیبهشت ۱۴۰۲، ۱۷:۲۳

ممنون بابت پشتیبانی خوبتون. مشکل نمایش آیکن حل شد (مشکل از سایت Font Awesome بود)

زمانی که از داخل سایت لینک آیکن رو کپی می‌کردم لینک رو به صورت زیر میداد :

<i class="fa-regular fa-phone">sadeghk76ia@gmail.comi>

در حالی که تو ورژن جدید گفتید که باید با Fas لینک داده بشه.

نمیفهمم چرا خود سایت به صورت Fas نمیده !!!

<i class="fas fa-envelope">sadeghk76ia@gmail.comi>

فقط یک سوالی داشتم راجب مورد زیر :

!important

بنده الان 3مورد با این مقدار دارم. میخواستم ببینم تداخل ایجاد نمیکنه ؟؟؟

شما به همین صورت منظورتونه لینک بدم تا برای آیکن‌ها ایران سنس رو نخونه ؟؟؟

*,
body {
  font-family: IRANSansX !important;
  direction: rtl;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
ol,
ul,
li {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea {
  font-family: IRANSansX !important;
}
h1 {
  font-weight: bold;
}
i {
  font-family: Font Awesome\\ 5 Free !important;
}

صادق کیامرزی ۱۴ اردیبهشت ۱۴۰۲، ۱۴:۳۳

این پروژه رو از نو زدم و همه چیز اوکی هست. لطفا یه بررسی داشته باشید. لینک پروژه

و اینکه برخی از آیکن‌ها رو نمیخونه. آیکن‌های شبکه اجتماعی. ابتداشون fas هم گذاشتم.

صادق کیامرزی ۱۴ اردیبهشت ۱۴۰۲، ۱۴:۵۵

سلام مجدد

خواهش میکنم خوشحالم مشکلتون حل شد. کلا این سایت font awesome دردسر زیاد داره برای همین اون لینک w3schools رو دادم اون اوکیه.

الان این لینکی که دادید رو بررسی کردم یسری چیزاش انگار با اسکرین شاته ک دادید فرق داره، اما با این حال برای رفعش دقت کنید که وقتی به بادی فونت میدید، ایمپورتنت نذارید. منطق اینطوریه که شما به صورت معمولی و بدون !important فونت رو به body میدید، بعد هرجا خواستید فونت جدید بدید یا تگ i و... اونجا !important بذارید.

مورد بعدی اینکه لینک ورژن fontawesome رو اشتباه دادید. اینی که زدید ورژن 6 هست پس به i باید ورژن 6 رو بدید. اگر با اینسپکتور یه آیکون رو بگیرید، متوجه میشید که قبلا از چه ورژن آیکونی استفاده میکرده و کافیه که همون رو در تگ i کپی کنید.

پس طبق دو مورد بالا، این کدپن باید اینجاهاش اصلاح شه:

*,
body {
  font-family: Doran FaNum;
  direction: rtl;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
i {
  font-family: "Font Awesome 6 Free !important";
}

بهترین پاسخ

نازنین کریمی مقدم ۱۷ اردیبهشت ۱۴۰۲، ۱۴:۲۵

ممنونم. کاملا متوجه شدم.

یه بررسی میکنم و تیکت رو میبندم.

صادق کیامرزی ۱۷ اردیبهشت ۱۴۰۲، ۱۸:۳۹