如何通过CDN链接在网页中添加Flaticons图标

核心问题 #

你当前引入的CDN是Flat UI框架的样式文件，和Flaticons图标库完全是两个不同的产品，这个CSS里根本没有定义flaticon-phone-call这类图标类，所以图标自然不会显示。另外你给<i>标签的类名末尾多了个空格，也可能导致样式匹配失败。

修正步骤 #

1. 替换正确的CDN链接
   去Flaticons官网选择你需要的图标，加入图标集合后，获取对应集合的CDN CSS链接（每个图标集合的链接不同，需根据你选的图标生成）。标准的Flaticons图标CDN引入格式类似：

   <head>
     <!-- 替换成你自己的Flaticons集合CDN -->
     <link rel="stylesheet" href="https://cdn.flaticon.com/css/flaticon.css">
   </head>
   

2. 修正图标类名
   去掉类名末尾的多余空格，确保类名和你引入的Flaticons CSS里定义的完全一致：

   <div class="header-phone-icon">
     <i class="flaticon-phone-call"></i>
   </div>
   

3. 验证效果
   刷新页面后，图标应该就能正常显示了。如果还是不行，检查CDN链接是否有效，以及类名是否和图标集合里的类名完全匹配。

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