كيف اضع الايقونة بجانب اسم الطالب في صفحة HTML

رجاءً قم بتوضيح المشكلة التي تواجهها تماماً حتى استطيع مساعدتك، فماهي صفحة اسم الطالب وعن اي فيديو انت تتحدث ؟ قم بنشر تعليقك في التعليقات اسفل الدرس في حال كان التعليق متعلقاً بدرس معين في الدورات.

ولماذا شاركت مسار المجلد على حاسوبك :

file:///C:/Users/hassa/OneDrive/Desktop/hsoup/index.html

فهذا المسار لن يعمل إلى على جهازك فقط، ولا نستطيع الاستفادة منه حتى نعاين مشكلتك، وذلك لأن الموقع حالياً هو مشروع محلي على حاسوبك لا يمكن الوصول إليه عبر الانترنت، ويمكنك مشاركة ملفات المشروع بدلاً من مشاركة المسار السابق.

الأيقونة واسم الطالب سيكونون بداخل عنصر أب وضعنها له تنسيق ليصبح flexbox ثم بداخله نقوم بكتابة ما نريد وأيضًا وضع الأيقونة كالتالي:

<div id="branding" style="flex-grow: 8">
    <h1><a href="index.html"><i class="fa fa-user-circle"></i> صفحة <sapn class="highlight">اسم الطالب</sapn></a> </h1>
</div>

وخاصية flex-grow في CSS تستخدم لتحديد مدى توسع العناصر المرنة (flex items) داخل العنصر الأب (flex container) بالنسبة للمساحة المتاحة، والقيمة التي تم تعيينها لـ flex-grow تحدد النسبة المئوية للمساحة المتاحة التي ستستخدمها العناصر المرنة داخل العنصر الأب.

حيث  تم تعيين flex-grow: 8 لعنصر <div> الذي لديه id "branding"، مما يعني أن العنصر سيكون مستعدًا لاستخدام مساحة أكبر بنسبة 8 مرات من العناصر الأخرى داخل العنصر الأب إذا كان هناك مساحة إضافية متاحة.

وبالنسبة لكيفية استخدام أيقونات Font Awesome فقد تم توضيح ذلك هنا: