新手求助：在页面中部添加社交平台Logo及用户名并替换主题色

Hey there! Let's break this down step by step so you can get those social icons set up and swap that pink for Twitter's blue. I'll keep it simple since you're new to frontend development.

Step 1: Add the Social Media Section to Your Page #

First, your current code is missing the main content area where we'll place the icons. Let's add that right after the aside section (right after </aside>):

<div id="colorlib-main">
  <section class="ftco-section contact-section px-md-4">
    <div class="container">
      <div class="row d-flex mb-5 contact-info">
        <div class="col-md-12 mb-4">
          <h2 class="h3">Connect With Us</h2>
        </div>
        <div class="w-100"></div>
        <!-- Instagram -->
        <div class="col-md-3 mb-3 mb-md-0">
          <div class="social-item d-flex align-items-center justify-content-center">
            <i class="fab fa-instagram"></i>
            <span>@your_instagram_handle</span>
          </div>
        </div>
        <!-- Facebook -->
        <div class="col-md-3 mb-3 mb-md-0">
          <div class="social-item d-flex align-items-center justify-content-center">
            <i class="fab fa-facebook-f"></i>
            <span>@your_facebook_handle</span>
          </div>
        </div>
        <!-- Snapchat -->
        <div class="col-md-3 mb-3 mb-md-0">
          <div class="social-item d-flex align-items-center justify-content-center">
            <i class="fab fa-snapchat"></i>
            <span>@your_snapchat_handle</span>
          </div>
        </div>
        <!-- Telegram -->
        <div class="col-md-3">
          <div class="social-item d-flex align-items-center justify-content-center">
            <i class="fab fa-telegram"></i>
            <span>@your_telegram_handle</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

Note About Icons:

Your current code uses icomoon.css, but if it doesn't include these social icons, add Font Awesome (a free, reliable icon library) to your <head> section to make the icons display correctly:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Step 2: Style the Social Icons #

Add this CSS to your style.css file to get a clean, centered look matching your example:

/* Social Item Base Styling */
.social-item {
  padding: 18px;
  background-color: #f5f5f5;
  border-radius: 8px;
  gap: 10px;
  transition: background-color 0.3s ease;
}

.social-item:hover {
  background-color: #e8e8e8;
}

.social-item i {
  font-size: 26px;
}

.social-item span {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

/* Brand-Specific Icon Colors */
.fa-instagram { color: #E4405F; }
.fa-facebook-f { color: #1877F2; }
.fa-snapchat { color: #FFFC00; }
.fa-telegram { color: #2AABEE; }

Step 3: Replace Pink with Twitter Blue (#1DA1F2) #

Find these sections in your style.css file and update the colors to Twitter's signature blue:

/* Active menu item color */
#colorlib-main-menu .colorlib-active a {
  color: #1DA1F2 !important;
}

/* Navigation toggle button lines */
.colorlib-nav-toggle i::before,
.colorlib-nav-toggle i::after {
  background: #1DA1F2;
}

/* Loader spinner color */
#ftco-loader .path {
  stroke: #1DA1F2;
}

/* Link hover color (adjust if your template uses pink here) */
a:hover {
  color: #1DA1F2;
}

Helpful Search Keywords for Future Reference #

Since you mentioned struggling with English search terms, here are some simple, effective ones you can use next time:

• "Add social media icons with usernames to HTML page"
• "Change template color scheme CSS"
• "Center social icons in Bootstrap grid"

Just swap out the placeholder usernames with your actual handles, and you'll be all set! Let me know if you hit any small snags along the way.

内容的提问来源于stack exchange，提问作者Dark Team