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

时间:2017-11-07 22:01:32

标签: javascript html css material-design

我想以编程方式修改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因为我认为这是我的问题的原因但是

2 个答案:

答案 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)

  1. 当您使用素材图标作为图标字体时,您应该在<i>标记内使用 snake_case :( account box => <i class="material-icons">account_box</i>)。

  2. 您使用的是错误的素材图标 错误,如“无效”。没有图标account inbox。仅限account boxaccount balanceaccount balance walletaccount circle 也就是说,恕我直言,你的代码最大的问题(凌乱和难以获得的部分)。

  3. 您真的不想将text-align: center应用于您网页的每个元素。将其添加到body就足够了,可以轻松覆盖。

  4. 我真的不明白为什么当你可以简单地切换一个类时,你完全用另一个版本替换两个标签(带有style属性,包含font-size声明)父母,并根据CSS {/ p>

  5. 应用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