如何在右上角加个链接

[tkfanswind]

如何在右上角加个链接。就是 contacts右边，我尝试加链接，但是图标出不来，图标咋设置的？
"contacts": [
{
"platform": "email",
"link": "mailto:xxxxx@gmail.com"
},
{
"platform": "github",
"link": "https://github.com/spencerwooo/onedrive-vercel-index"
},
{
"platform": "fa-apple",
"link": "https://apple.xxxxx"
}
]
感谢。

连接可以点，但是图标出不来，页面上看不到连接。
我想用这个图标
https://fontawesome.com/v5.15/icons/apple?style=brands

[opoet]

[tkfanswind]

如何在右上角加个链接。就是 contacts右边，我尝试加链接，但是图标出不来，图标咋设置的？
"contacts": [
{
"platform": "email",
"link": "mailto:xxxxx@gmail.com"
},
{
"platform": "github",
"link": "https://github.com/spencerwooo/onedrive-vercel-index"
},
{
"platform": "fa-apple",
"link": "https://apple.xxxxx"
}
]
感谢。
连接可以点，但是图标出不来，页面上看不到连接。
我想用这个图标
https://fontawesome.com/v5.15/icons/apple?style=brands

icon不是完整的，只会编译需要用到的，所以无法自定义icon

都编译了啥icon有列表吗？ 只要跟前两个不一样就行。或者能自定义外部icon吗？

[tkfanswind]

如何在右上角加个链接。就是 contacts右边，我尝试加链接，但是图标出不来，图标咋设置的？
"contacts": [
{
"platform": "email",
"link": "mailto:xxxxx@gmail.com"
},
{
"platform": "github",
"link": "https://github.com/spencerwooo/onedrive-vercel-index"
},
{
"platform": "fa-apple",
"link": "https://apple.xxxxx"
}
]
感谢。
连接可以点，但是图标出不来，页面上看不到连接。
我想用这个图标
https://fontawesome.com/v5.15/icons/apple?style=brands

icon不是完整的，只会编译需要用到的，所以无法自定义icon

都编译了啥icon有列表吗？ 只要跟前两个不一样就行。或者能自定义外部icon吗？

可以在源码里面引入然后使用的

我是小白。给举个例子。感谢

[opoet]

如何在右上角加个链接。就是 contacts右边，我尝试加链接，但是图标出不来，图标咋设置的？
"contacts": [
{
"platform": "email",
"link": "mailto:xxxxx@gmail.com"
},
{
"platform": "github",
"link": "https://github.com/spencerwooo/onedrive-vercel-index"
},
{
"platform": "fa-apple",
"link": "https://apple.xxxxx"
}
]
感谢。
连接可以点，但是图标出不来，页面上看不到连接。
我想用这个图标
https://fontawesome.com/v5.15/icons/apple?style=brands

icon不是完整的，只会编译需要用到的，所以无法自定义icon

都编译了啥icon有列表吗？ 只要跟前两个不一样就行。或者能自定义外部icon吗？

芜湖，我理解错了，看了下源码，这里是你写错了，就写个apple试试

[opoet]

"contacts": [
{
"platform": "email",
"link": "mailto:xxxxx@gmail.com"
},
{
"platform": "github",
"link": "https://github.com/spencerwooo/onedrive-vercel-index"
},
{
"platform": "fa-apple",
"link": "https://apple.xxxxx"
}
]

{
  "platform": "apple",
  "link": "https://apple.xxxxx"
}

这样试试

[tkfanswind]

不行。中间那个空白处就是那个链接
晕

[spencerwooo]

之前想简单了，这部分功能后面准备从 config 文件里面抽离出去了，主要还是因为图标是按需引入的，没办法用一个 config 参数直接定义，至少现在看起来直接定义在 config 中的实现比较麻烦。因此，如果要添加自定义图标需要：

• 引入图标：在 pages/_app.tsx 中引入（import）相应的图标并加入 library.add() 的参数中，并…

• 加入导航栏：在 components/Navbar.tsx 的 第 71 行 加入相应的 TSX 定义，比如：

  <a
    href="https://..."
    target="_blank"
    rel="noopener noreferrer"
    className="p-2 rounded hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700"
  >
    <FontAwesomeIcon icon={['far', 'envelope']} size="lg" />
  </a>

当然，除了图标，加上文字之类的内容也是可以的。

[tkfanswind]

import { faGithub, faApple, faMarkdown } from '@fortawesome/free-brands-svg-icons'

library.add(
faApple,
)
site.json添加
{
"platform": "apple",
"link": "https://xxx.xxx."
}

这样成功了.

我看有一句代码是
<FontAwesomeIcon icon={['fab', c.platform as IconName]} size="lg" />

所以只能选是fab同类的图标引入，就能显示了

为啥名字有好多faApple,fa-apple,apple。还有前缀。名字太多了

搞迷糊了