字体铅笔图标有时显示为正方形在铬ms面料 [英] font pencil icon sometime shows as square in chrome ms fabric

问题描述

我正在使用office.js和ms fabric ui设计开发office办公软件

内部它使用unicode字符显示铅笔图标和css，看起来像这样。

  .ms-Icon  - 铅笔：before {
 content：'\e027'; 
} 
  

请帮我解决这个问题。

dev工具形式我的页面看起来像这样

解决方案

UPDATE

在< i> 规则：

1. 第一个类必须是 ms-Icon


2. 以下是图标类别： ms-Icon ms-Icon - pencil


3. 在所有 ms-Icon - * 类之后，添加第三方和自定义类： ms-Icon ms- Icon --pencil themeColor



不需要 themeColor 和 highlightColor2 ，因为一个取消了另一个。 ！important 不是一个更正工具，如果所有其他选项失败，它是最后一个选项。查看您屏幕截图的以下屏幕截图。

所以你的app.css有一个小的颜色变化但你正在分配类willy nilly。 CSS当选择器的顺序是非常不原谅。如果你有一个模式开始，坚持那个模式，它会出来，然后你继续这种方式，否则它不会，你改变它在那里。所以如果它的工作第一次很可能如果你继续在那个方向，你应该确定。

.ms-Icon - 铅笔有一个包含另一个图标图标 - 圆似乎在某些时候，它们被分组为一对 - 最有可能指定处于编辑模式或类似状态。

1. 第一个例子是 .ms-Icon - pencil ，我包含了比较。


2. 第二个示例是原始的unicode dingbat。


3. 第三个示例是原始的unicode dingbat修改为 .ms-Icon - pencil - 目的是使用此图标作为替代。如果问题仍然存在，那么您可以消除可能性。但如果问题不再发生，这是好消息和坏消息。好消息，因为你没有一个消失的图标，坏消息是你可能会有一个新的问题在别处。 ：-\


4. 最后一个例子是 .ms-Icon - circle.ms-Icon - pencil 以显示调试时要查找的内容。

SNIPPET

  / *铅笔在圆形风格|接下来的两个规则集可能代表|状态（例如，编辑模式）。这个|必须与问题相关的你|正在经历。* /。ms-Icon  - 圆圈：之后{content：'\e000';}。ms-Icon  -  circle.ms-Icon  - 铅笔：before {top：-2％ left：3％} / *添加到铅笔/圆形样式美观* /。ms-Icon  -  circle {display：table-cell; white-space：nowrap;} / *自定义编辑/铅笔样式* /。ico-original-pencil：before {content：'\270e'}。ico-edit：before {content：'\270e' font-size：1.2ch; font-weight：400; -webkit-transform：rotate（90deg）; transform：rotate（90deg）; display：inline-block;} / * Minor Layout * / dl {margin-top：20px;} dt {margin-top：15px;}  snippet-code-html lang-html prettyprint-override> < link href ='http：//dev.office.com/Modules/DevOffice.Fabric/Fabric/css/fabric.min.css 'rel = stylesheet>< dl> < dt> MS铅笔图示：\e270< / dt> < dd>< i class =ms-Icon ms-Icon  -  pencil> .ms-Icon  -  pencil< / i> < / dd> < dt> Original Pencil Unicode Dingbat：\270e< / dt> < dd>< i class =ms-Icon ico-original-pencil> .ico-original-pencil< / i> < / dd> < dt> Modified Pencil Dinfbat：\270e< / dt> < dd>< i class =ms-Icon ico-edit> .ico-edit< / i> < / dd>< / dl>< dl> < dt>圆形图示中的MS铅笔图示：\e000< / dt> < dd style =relative> < br />< i class ='ms-Icon ms-Icon  -  circle ms-Icon  -  pencil'>< / i>< span> .ms-Icon  -  circle.ms-Icon --pencil< / span> < / dd>< / dl>  

I am developing an office addin using office.js and ms fabric ui design http://dev.office.com/fabric/styles. i have used the ms fabric icon class ms-Icon--pencil to show pencil icon. however sometime i noticed that instead of showing pencil icon, it shows square icon as below

internally it uses unicode character to show the pencil icon and css for that looks like this.

.ms-Icon--pencil:before {
    content: '\e027';
}

please help me to fix this.

dev tool form my page look like this

解决方案

UPDATE

On the <i> element follow these rules:

1. The first class must be: ms-Icon
2. Immediately following are the icon classes: ms-Icon ms-Icon--pencil
3. After all of the ms-Icon--* classes, add the 3rd party and custom classes: ms-Icon ms-Icon--pencil themeColor

There's no need for both themeColor and highlightColor2, because one cancels the other out. !important is not a correction tool, it's a the last option if all other options fail. Review the following screenshot of your screenshot.

So your app.css has a minor color change BUT you are assigning classes willy nilly. CSS is very unforgiving when the order of selectors are concerned. If you have a pattern to start out with stick to that pattern, either it'll come out right then you continue that way or it won't and you change it right there. So if it works the first time most likely if you continue in that direction you should be ok.

.ms-Icon--pencil has a ruleset involving another icon .ms-Icon--circle It seems at some point they are grouped as a pair--most likely to designate being in a state like edit mode or something to that effect.

1. The first example is .ms-Icon--pencil which I included for comparison.
2. The second example is the original unicode dingbat.
3. The third example is the original unicode dingbat modified to look like .ms-Icon--pencil--the purpose is to use this icon as a replacement. If the issue persists, then you can eliminate possibilities. But should the issue not reoccur, it's good news and bad news. Good news because you don't have a vanishing icon, bad news is you'll probably have a new problem elsewhere. :-\
4. The last example is .ms-Icon--circle.ms-Icon--pencil, which is recreated to show you what to look for while debugging. Further details are commented in the Snippet below.

SNIPPET

/* Pencil in a Circle Style
| The next 2 rulesets probably represent
| a state (e.g. Edit Mode maybe). This 
| must be related to the problem you 
| are experiencing.
*/

.ms-Icon--circle:after {
  content: '\e000';
}
.ms-Icon--circle.ms-Icon--pencil:before {
  top: -2%;
  left: 3%
}
/* Added to Pencil/Circle Styles for aesthetics */

.ms-Icon--circle {
  display: table-cell;
  white-space: nowrap;
}
/* Custom Edit/Pencil Styles */

.ico-original-pencil:before {
  content: '\270e'
}
.ico-edit:before {
  content: '\270e';
  font-size: 1.2ch;
  font-weight: 400;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  display: inline-block;
}
/* Minor Layout */

dl {
  margin-top: 20px;
}
dt {
  margin-top: 15px;
}

<link href='http://dev.office.com/Modules/DevOffice.Fabric/Fabric/css/fabric.min.css' rel=stylesheet>
<dl>
  <dt>MS Pencil Icon: \e270</dt>
  <dd><i class="ms-Icon ms-Icon--pencil"> .ms-Icon--pencil</i>
  </dd>
  <dt>Original Pencil Unicode Dingbat: \270e</dt>
  <dd><i class="ms-Icon ico-original-pencil"> .ico-original-pencil</i>
  </dd>
  <dt>Modified Pencil Dinfbat: \270e</dt>
  <dd><i class="ms-Icon ico-edit"> .ico-edit</i>
  </dd>
</dl>
<dl>
  <dt>MS Pencil Icon in Circle Icon: \e000</dt>
  <dd style="relative">
    <br/><i class='ms-Icon ms-Icon--circle ms-Icon--pencil'></i><span>.ms-Icon--circle.ms-Icon--pencil</span>
  </dd>
</dl>

这篇关于字体铅笔图标有时显示为正方形在铬ms面料的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！