Question

我想以编程方式修改div标记的内容。我想并排添加两个素材图标。

我创建了以下小提琴，这是我测试内容的最小版本： https://jsfiddle.net/zog20r7n/3/

如果我尝试修改

的line 36

<i class=\"material-icons \" >account inbox</i>

以下

<i class=\"material-icons md-mine\" >account inbox</i>

第一个图标将刷新到第二个图标的右侧。

您还可以看到，在第一次点击按钮时，图标将刷新到页面右侧，第二个图标以新线为中心。

我不太了解这种行为，而且我不知道我的方法是否错误。有人知道这里发生了什么，以及如何解决它？

我试图调整CSS因为我认为这是我的问题的原因但是

Answer 1

我不知道正确的位置如何期待，但......

这是原始的CSS图标。

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap; 
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased; 
}

这里有一种格式可以覆盖这些属性：

.material-icons {
  white-space: disble; 
}

ellements之间的elimine空间：

width: fit-content

Answer 2

当您使用素材图标作为图标字体时，您应该在<i>标记内使用 snake_case :( account box => <i class="material-icons">account_box</i>）。
您使用的是错误的素材图标错误，如“无效”。没有图标account inbox。仅限account box，account balance，account balance wallet和account circle 也就是说，恕我直言，你的代码最大的问题（凌乱和难以获得的部分）。
您真的不想将text-align: center应用于您网页的每个元素。将其添加到body就足够了，可以轻松覆盖。
我真的不明白为什么当你可以简单地切换一个类时，你完全用另一个版本替换两个标签（带有style属性，包含font-size声明）父母，并根据CSS {/ p>

font-size

全部放在一起，还有一些细节（我是怎么做的）：

$("#testButton").on('click', function() { $('#divContent').toggleClass('largeFonts')});

body {
  text-align: center;
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  display: block;
  color:deepskyblue;
  font-style: normal;
  font-weight: normal;
  font-size: 96px;
  line-height: 1;
  text-transform: none;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  transform: scale(.25);
  transition: transform .3s cubic-bezier(.4,0,.2,1)
}
#divContent {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
#divContent.largeFonts .material-icons {
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="testButton" type="button">Click to test</button>

<div id="divContent">
    <i class="material-icons">account_box</i>
    <i class="material-icons">computer</i>
</div>

注意我选择在两种情况下保持font-size完整（96px），并使用transform更改图标的大小。更顺畅的过渡（作为演示添加），在浏览器上轻松得多（即使您同时为很多项目制作动画），而且非常重要的是，它在所有状态下保持相同line-height，这意味着项目在当您单击该按钮时，DOM中的同一行或它们之后将不会根据更改上下跳动。

不要忘记autoprefix。

材料图标并排通过JavaScript添加语法

2 个答案: