标签: icon-fonts

我一直在 css-tricks 上遵循这种技术来将图标添加到网站： http: //css-tricks.com/html-for-icon-font-usage/

我的 CSS 中有这个：

[data-icon]:before {
  font-family: Symbol;
  content: attr(data-icon);
  speak: none;
}

然而，我的界面的一部分是使用 jQuery 生成的。这是一个这样的控件：

var $control = $('<div>', {
    'aria-hidden':'true'
    , 'data-icon': '&#57372;'
});

我尝试过将其编码为\e01c, \\e01c, ，你能想到的，我可能已经尝试过了。结果总是相同的，“&”号之后的所有内容都会呈现到屏幕上，因为“&”号像&源代码中那样出现，或者反斜杠显示出来。

我尝试连接 CSS 内容：

content: "&" attr(data-icon) ";";

并且仅在数据中包含数字，但＆符号仍然显示为单独编码。

有什么方法可以对该实体进行编码并使其正确输出到页面吗？

我试图在左侧输入中包含一个Font Awesome但我没有成功.我从未使用过令人敬畏的字体.有谁知道如何在输入中包含字体？谢谢!

我试图在输入的左侧包含的字体:

  <i class="fa fa-user"></i> 

我的HTML:

<form action="" method="post">
       <input type="text"class="inputs" placeholder="e-mail" /> 
       <br />
       <input type="password" class="inputs"placeholder="Password"  />

</form> 

我的css:

 inputs:-webkit-input-placeholder { 
        color:    #b5b5b5; 
    } 

    inputs-moz-placeholder { 
        color:    #b5b5b5; 
    } 

     .inputs  { 
        background: #f5f5f5; 
        font-family:"bariol_regularregular", Palatino, serif;
        -moz-border-radius: 3px; 
        -webkit-border-radius: 3px; 
        border-radius: 3px; 
        border: none; 
        padding: 13px 10px; 
        width:180px; 
        margin-bottom: 10px; 
        box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 ); 
        height:20px;
    } 

    .inputs:focus { 
        background: #fff; 
        box-shadow: 0px 0px 0px 2px #96842E; 
        outline: none;    
    } 

我试图旋转一个图标,transform: rotateZ(90deg)但似乎它忽略了它.

当我向图标添加转换时,我可以看到图标的动画旋转,但是当它完成动画时它会快速回到原位.

这里是:

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

span {
  transition: 2s;
  border: 1px solid red;
  font-size: 500px;
}

span:hover {
  transform: rotateZ(90deg);
}

<span class="fontawesome-download-alt"></span>

有没有推荐的方法让Icon Fonts(eq.FontAwesome/Octicons)流入Shadow DOM？

目前,当我想在自定义元素的Shadow DOM中使用图标时,我必须在Shadow DOM中包含ociticons.css内联文件的部分内容:

#shadowroot
<style>
    .octicon, .mega-octicon {
      font: normal normal normal 16px/1 octicons;
      display: inline-block;
      text-decoration: none;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .mega-octicon { font-size: 32px; }
    .octicon-search:before { content: '\f02e'} /* ? */
</style>
<button>
  <span class="mega-octicon octicon-search"></span>
</button>

(显然,@font-face它会渗入Shadow DOM.)

背景

我目前正在大量使用 webfonts，特别是图标字体。我需要确定特定图标的哪个字符用于测试目的，因此我可以简单地输入字符和/或复制粘贴它。

例子

大多数图标字体的 CSS 是相似的，使用 :before 伪方法，例如

.icon-search:before{content:"\f002"}

题

• 我相信这种编码被称为 CSS 字符（十六进制），这是正确的吗？
• 是否有任何工具允许我输入转义的 CSS 字符值并将其转换为我可以复制和粘贴的值
• 是否有工具可以将其转换为 HTML 十进制值，例如 & = simple amperstand

概括

我希望能够找出它是哪个字符，这样我就可以简单地在键盘上输入它。我花了很长时间查找它，但不太确定这种类型的编码和转换称为什么，所以找不到我要找的东西。我很感激一些指点。

我不使用Font Awesome,但我确实使用了Chris Coyier描述的CSS Tricks方式的图标字体.

我想调整他的代码,使他们能够在IE7中工作.我意识到IE7不支持生成的内容,所以我看看Font Awesome如何处理这个问题,看起来他们使用这个JS表达式:

.ie7icon(@inner) {
  *zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '@{inner}')";
}

我的问题是,我只是能够了解它实际上在做什么.我需要知道这一点,所以我可以调整它,使它适用于我使用图标的方式.

添加:

我现在在Sass文件中有这个:

[data-icon]:before {
  @extend %icon-font
  content: attr(data-icon)
  speak: none
  -webkit-font-smoothing: antialiased

1. 我如何使用JS表达式添加IE7支持？也许mixin会以某种方式帮助吗？

2. 你能解释一下实际的JS表达吗？

我有一个svg,在任何浏览器打开时都很好.我试图使用http://icomoon.io/将它们中的一堆转换为字体图标,但导入后它没有正确显示.我也试过使用http://fontastic.me/,但没有运气.

这是SVG图像标记 -

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve" style="
    color: red;
">
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M323.41,321.664c0,0.457-0.371,0.828-0.828,0.828  H88.835c-0.458,0-0.829-0.371-0.829-0.828V87.918c0-0.459,0.371-0.829,0.829-0.829h233.747c0.457,0,0.828,0.37,0.828,0.829V321.664z  " style="
    color: red;
"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M215.311,196.935"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M250.935,277.399  c25.36-14.769,42.409-42.247,42.409-73.71c0-47.078-38.164-85.242-85.242-85.242s-85.242,38.164-85.242,85.242  c0,31.463,17.048,58.941,42.408,73.71"/>
<g>
    <path fill="#231F20" d="M173.653,282.14l-4.741-48.439c-0.059-0.58-0.327-1.092-0.715-1.482l-47.088,54.471   c0.48,0.449,1.127,0.714,1.82,0.676l48.578-2.721C172.82,284.568,173.783,283.448,173.653,282.14z"/>
</g>
<text transform="matrix(1 0 0 1 175.665 231.1914)" fill="#231F20" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" font-family="'Helvetica'" font-size="99.4919">A</text>
</svg>

我猜它与图像的创建方式有关,但找不到很多关于如何解决问题的资源.任何帮助都是极好的!

谢谢.

我使用图标字体作为列表样式元素:

.desc.std li:before {
  content: '\e81e';
  font-family: 'icons';
  width: .6em;
}

但是当文本中断到第二行时,我没有文本缩进.

任何人都可以告诉我,我怎么能得到第二行和后续行缩进？

我无法显示我的图标字体。这是我的目录结构：

_ 文件夹包含 _ 文件夹之外的 css 和 fonts 文件夹我有 demo1.html 页面

这是我用于设置字体的代码：

@font-face {
    font-family: 'icomoon';
    src:url('_/fonts/icomoon.eot?-9hqo51');
    src:url('_/fonts/icomoon.eot?#iefix-9hqo51') format('embedded-opentype'),
        url('_/fonts/icomoon.woff?-9hqo51') format('woff'),
        url('_/fonts/icomoon.ttf?-9hqo51') format('truetype'),
        url('_/fonts/icomoon.svg?-9hqo51#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

html代码如下：

<span aria-hidden="true" class="icon-raja_head"></span>

这是我设置的示例页面。字体代码在我的样式表的第 903 行。

谢谢-Sohail

我在AI中创建了一些图标,所以现在我正在寻找如何在不使用第三方应用程序(如fontastic ......)的情况下将它们转换为web图标字体

所以我需要创建自己的.ttf,.eot,.woff和.svg文件以这种方式插入它们

@font-face {
  font-family: "MYFONT";
  src:url("fonts/MYFONT.eot");
  src:url("fonts/MYFONT.eot?#iefix") format("embedded-opentype"),
    url("fonts/MYFONT.woff") format("woff"),
    url("fonts/MYFONT.ttf") format("truetype"),
    url("fonts/MYFONT.svg#MYFONT") format("svg");
}

任何帮助都会非常有用:)