كيف يمكن وضع الأيقونات بشكل سطري مع اللوقو في CSS

مريم جمال2 · 14 يوليو 2023

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Facebook 2</title>
    <link rel="stylesheet" href="Facebook 2.css">
    <link rel="stylesheet" href="css/all.min.css">

</head>
<body>

    <div class="parent">

        <div class="head">
        
            <div class="nav">

                <div class="nav-left">

                    <ol>
                        
                        <li><img src="facebook-logo.jpg" alt="logo"></li>
                        <li><i class="fa-regular fa-bell"></i></li>
                        <li><i class="fa-regular fa-inbox"></i></li>
                        <li><i class="fa-solid fa-video"></i></li> 

                    </ol>

                    
                </div>

            </div>
        
        </div>
        <div class="main-content"><p>main-content</p></div>
        <div class="foot"><p>foot</p></div>

    </div>
    
</body>
</html>

*{

    padding: 0;
    margin: 0;
    font-family: "poppins", sans-serif;

}

.parent{

    width: 100%;
    background: #272727;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(3 ,1fr);
    grid-template-rows: repeat(6 ,150px);
    grid-template-areas: 
    "head head head"
    "main-content main-content main-content"
    "main-content main-content main-content"
    "main-content main-content main-content"
    "main-content main-content main-content"
    "main-content main-content main-content"
    "main-content main-content main-content"
    "foot foot foot";
}

.parent div{

    background: rgba(241, 241, 241, 0.5);

}

.head{

    grid-area: head;

}

.main-content{

    grid-area: main-content;    

}

.foot{

    grid-area: foot;    

}

.nav-left ol li{

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.nav-left img{

    width: 150px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;   
}

.nav-left{

    display: flex;
    align-items: center;
    justify-content: space-between;   

}

كيف يمكن ان تظهر الأيقونات على يمين شعار الفيسبوك وليس بالأسفل:

Kais Hasan · 14 يوليو 2023

يمكنك القيام بذلك عن طريق وضع جميع المكونات التي تريد أن تظهر على نفس السطر في مكون div و من ثم وضع التنسيق لهذا المكون على أنه flex.

هذا مثال مبسط عما تريده:

<!DOCTYPE html>

<head>
    <style>
        #someId {
            display: flex;
            flex-direction: row;
        }
    </style>
</head>

<body>
    <div id="someId">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

Adnane Kadri · 14 يوليو 2023

حل آخر يمكنك اعتماده لمقاربة نفس النتيجة، هو تعويم عناصر li داخل ol نحو اليسار:

ol li{
  float: left;
  margin: 0 10px;
  padding: 0 10px;
}

سيجعل هذا العناصر تظهر بشكل سطري متتال.

توثيق الخاصية float في CSS

عبدالباسط ابراهيم · 14 يوليو 2023

قم فقط بتغيير التنسيقات التالية

.nav-left ol li{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

إلى الآتي

.nav-left ol{ /*li وليس  ol لاحظ تنفيذ التنسيقات على ال */
    display: flex;
}

التعديل السابق يقوم بتنفيذ المطلوب

Mustafa Suleiman · 14 يوليو 2023

الأمر بسيط، بإمكانك وضع العنصرين الشعار والأيقونة داخل عنصر حاوي لهم أي عنصر أب، ثم إعطاء خاصية flex للعنصر الأب وستظهر العناصر بداخله بجانب بعضها البعض، مع استخدام خاصية gap بقيمة 10 بكسل مثلاً من أجل توفير مساحة بين عناصرالـ flexbox.

أو لا داعي لاستخدام الـ Flex حيث يمكنك وضع الشعار والأيقونة داخل عنصر أب حاوي لهم، ثم إعطاء خاصية margin للأيقونة من جهة اليمين أو اليسار بحسب رغبتك، وبذلك سيتم عرضهم بجانب البعض، لكن عليك بإعطاء العنصر الخاص بالأيقونة والشعار خاصية inline-block من أجل أن يتموضع كل منهم بجانب بعضهم البعض، حيث أن عناصر block مثل div تستحوذ على كامل عرض الشاشة وتأتي العناصر الأخرى بعدها في سطر جديد.

ولكن أسهل وأفضل طريقة هي استخدام الـ Flex وقد تم توضيح ذلك، وأنصحك بالإعتماد على الأداة التالية لكي تفهمي خواص الـ Flex:

https://flexbox.malven.co

Hessen Nasser · 14 يوليو 2023

لوضع الأيقونات بشكل سطري مع الشعار في ال CSS، يمكنك استخدام تقنية Flexbox أو تقنية Grid. هنا هي الخطوات التي يمكن اتباعها لتحقيق ذلك:

سوف نقوم باستخدام تقنية Flexbox

قبل اي شيء يجب ان تقوم بجعل عنصر الصوره وعنصر القائمة منفصلين واليك الكود الجديد

                <div class="nav-left">
				
                  <img src="facebook-logo.jpg" alt="logo">
                  <ol>
                    <li><i class="fa-regular fa-bell"></i></li>
                    <li><i class="fa-regular fa-inbox"></i></li>
                    <li><i class="fa-solid fa-video"></i></li> 
                  </ol>
                    
                </div>

ثم تقوم بتفعيل Flexbox علي العنصر الاب وهو العنصر الذي يحتوي علي class = "nav-left" كالتالي

.nav-left{
    display: flex;
    align-items: center;
    justify-content: space-betweem;
}

حاليا سيظهر لك الصوره في جانب الصفحه وقائمة الروابط في الجانب الاخر من الصفحه

الخطوه التاليه هي تنسيق قائمة الروابط ايضا بتقنية Flexbox كالتالي

.nav-left ol{
    display: flex;
    align-items: center;
    justify-content: space-betweem;
	gap: 10px; // لعمل مسافه بين عناصر قائمة الروابط
}

استخدام خاصية Flexbox امر بسيط ولكن مهم جدا لانشاء مواقع متجاوبة مع الشاشات المختلفه انصحك باتقانه جدا وبامكانك قراءة هذه المواضيع المختلفه ليتشكل لديك فهم واسع عن طريقة استخدام هذه الخاصية

https://academy.hsoub.com/programming/css/أساسيات-flexbox-في-css-مع-أمثلة-عملية-r183/

كيف يمكن وضع الأيقونات بشكل سطري مع اللوقو في CSS

السؤال

مريم جمال2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

5 أجوبة على هذا السؤال

Recommended Posts

Kais Hasan

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عبدالباسط ابراهيم

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hessen Nasser

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية