使用ionicons添加LinkedIn、GitHub跳转链接功能失效问题求助

问题原因 #

• 你把<a>标签嵌套在了<ion-icon>标签内部，ion-icon组件渲染时会自动覆盖内部的自定义内容，所以放在里面的链接无法正常生效
• LinkedIn对应的跳转标签错误使用了<link>标签，这个标签是用于引入网页资源的元标签，本身没有页面跳转功能
• ion-icon的size属性值缺少引号包裹，部分浏览器无法识别无引号的属性赋值

修正后的代码 #

<section class="contactInfo">
    <div class="cinfo">
      <h4><a name="contactInfo">Contact </a></h4>
      <div class="icons1">
        <!-- LinkedIn跳转链接 -->
        <a href="替换为你的LinkedIn个人主页完整链接" target="_blank" rel="noopener noreferrer">
          <ion-icon name="logo-linkedin" size="large"></ion-icon>
          <p>Linkedin</p>
        </a>
        <!-- GitHub跳转链接 -->
        <a href="https://github.com/hgihliugi" target="_blank" rel="noopener noreferrer">
          <ion-icon name="logo-github" size="large"></ion-icon>
          <p>GitHub</p>
        </a>
      </div> 
    </div>
</section>

补充说明 #

• 把图标、对应描述文字全部包裹在<a>标签内部，点击任意区域都能触发跳转
• 新增的target="_blank"属性可以让链接点击后在新标签页打开，不会覆盖当前个人站点
• rel="noopener noreferrer"是外链跳转的标准安全配置，避免跳转后泄露当前页面的相关信息

内容的提问来源于stack exchange，提问作者L.Bar5522