如何将响应式图形徽标添加到当前＆＃34;文本徽标＆＃34;？

Question

我正在尝试将图像添加到我当前的文字徽标中。现在，徽标是100％文本和响应，它调整大小和所有。我需要在它前面放置一个徽标或图标，但它不断调整大小和排队非常奇怪。以下是仅适用于文本的当前代码。尝试在文本中添加一个32 x 32小图标，并在移动设备上正确调整大小。

@media(min-width:768px) {
    .navbar-fixed-top {
        padding: 25px 0;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-fixed-top .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-fixed-top.navbar-shrink {
        padding: 10px 0;
    }

    .navbar-fixed-top.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }


}

以下是我在html文件中的内容：

  <a class="navbar-brand" href="#page-top">LOGO TEXT WORKING</a>

Answer 1

你有什么尝试？有很多不同的选择。您可以使用图像中的徽标和文本创建图像并调整大小。或者您可以通过vw设置仅徽标图像的高度。像宽度：2vw;。另一种选择是为徽标图像创建容器，并在徽标图像宽度为100％时动态调整容器大小。

或者将img和text放在容器中，这样它们总是“排队”。