CSS背景图片不显示及图标使用问题技术求助

一、背景图片无法显示的修复 #

你的文件结构为：

htdocs/
└── ALUMEET/
    ├── profile.html
    ├── CSS/
    │   └── profile.css
    └── images/
        └── help2.jpg

当前CSS中url('/images/help2.jpg')是网站根目录（htdocs）的绝对路径，但图片实际存放在ALUMEET/images/下，路径匹配错误导致图片无法加载，可通过两种方式修复：

1. 相对路径（推荐）
   从profile.css所在的CSS/目录向上退一级到ALUMEET/，再进入images/目录，修改代码：

   .container {
       background: url('../images/help2.jpg');
   }
   

2. 绝对路径
   明确指定从网站根目录到图片的完整路径：

   .container {
       background: url('/ALUMEET/images/help2.jpg');
   }
   

二、Iconify图标的正确使用方法 #

Iconify最便捷的使用方式是通过CDN引入，步骤如下：

1. 在profile.html的<head>标签内添加Iconify的CDN脚本：

   <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
   

2. 在HTML中直接用<iconify-icon>标签调用图标，图标名格式为[图标库名]:[图标名]，例如调用Material Design的主页图标：

   <iconify-icon icon="mdi:home" width="24" height="24"></iconify-icon>
   

3. 可在Iconify官方图标库中搜索所需图标，复制对应图标名即可使用。

三、替代Unicons的图标库及使用方式 #

1. Font Awesome #

• 引入方式：在HTML的<head>中添加CDN链接：

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

• 调用图标：使用<i>标签并添加对应类名：

  <i class="fas fa-user"></i>
  

2. Material Icons #

• 引入方式：在HTML的<head>中添加CDN链接：

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  

• 调用图标：使用<i>或<span>标签并添加material-icons类：

  <i class="material-icons">person</i>
  

3. Tabler Icons #

• 引入方式：在HTML的<head>中添加CDN链接：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
  

• 调用图标：使用<i>标签并添加对应类名：

  <i class="ti ti-user"></i>
  

4. Feather Icons #

• 引入方式：在HTML的<body>末尾添加CDN脚本：

  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  

• 初始化并调用图标：

  <i data-feather="user"></i>
  <script>
      feather.replace()
  </script>
  

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