时间戳

首页 > 解决方案 > 如何从我的计算机将图标添加到本地链接？

html - 如何从我的计算机将图标添加到本地链接？

问题描述

我在本地计算机上有一个图标，我想知道如何在不引用其他网站（如 font awesome 或 google fonts）的情况下将图标添加到计算机外的链接中。我的 head 标签中代码底部的最后一个链接是本地计算机上的图标，我想知道如何将它添加到显示“播放”的链接中。

这是我想要的样子： 在此处输入图像描述

这是我的代码：

<html lang="en">
<head>
    <title>Chess Facts</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/webp" href="C:\Users\nitro\Desktop\Chess Website\images\play logo.swbp"></link>
</head>

<div id="outer-container">
    <div class="sidebar">
        <a href="#"><img src='images/best chess.com logo.png' id="chess-logo" alt="chess_logo" height='33px' width='110px'></a>
        
        <div class="subnav">
            <a href="#" class="subnavbtn">Play</a>

标签： htmlcss

解决方案

我相信您要做的是使用 flexbox 定位链接和图像。

这是 flexbox 的有用资源！

因此，首先，在 HTML 中，您需要在要定位的元素周围放置 a，并且只放置那些元素，因为此 div 中的所有内容都将由 flexbox 定位。在这种情况下，img 和链接。将链接放在首位在这里很重要，因为默认的 flexbox 位置会将它们按从左到右的顺序排列。

<div class="flexBox_Container">
   <a href="#" class="subnavbtn"> Play </a>
  <img src="https://i.stack.imgur.com/ViYD4.png">
</div>

然后，在 CSS 中，您需要在要定位的对象的容器/父对象上进行弹性定位。你可以用你想要的任何东西替换“flexBox_Container”。执行“display:flex”以使用 flexbox 定位。默认定位是从左到右的行。这应该将您的元素并排放置。对齐内容将使您的元素左对齐、右对齐或居中。

.flexBox_Container{
    display: flex;
    justify-content: center;
}

如果由于某种原因上述行不起作用，请尝试添加..

    flex-direction: row;

如果你想要相反的顺序尝试

    flex-direction: row-reverse;

有关 flexbox 的更多详细信息，请参阅我上面链接的源代码，或者试试这个 flexbox 游戏！希望这有帮助！

推荐阅读