我想以编程方式修改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因为我认为这是我的问题的原因但是
答案 0 :(得分: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
答案 1 :(得分:1)
当您使用素材图标作为图标字体时,您应该在<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。