标签: icon-fonts

将字体更新为现有字体

我已经在我们的网站上使用了5个icomoon字体,这些字体是从icomoon下载的.我想要包含2个以上的字体.我该怎么办？

我可以将新的2种字体添加到现有字体吗？如果是,我该如何添加它们？

我是网页设计和开发的新手,并且一直在玩不同的造型技术.在我的研究过程中,我遇到了图标字体.虽然我已经调查了很多教程和视频,但是尽管付出了很多努力,但我还是无法成功地使用图标字体.

首先,我去了一个提供大量图标字体的网站,选择了我喜欢的字体,生成它们,最后将它们下载到一个文件夹中.但是现在这些图标字体在文件夹中,我该怎么办？

我正在创建一些图标字体规则,以便在我的网站中使用.使用Sass我想列出列表变量中的所有图标,并使用@each循环遍历它们.

代码如下所示:

$icons: 
    wifi 600,
    wifi-hotspot 601,
    weather 602;

@each $icon in $icons {
    .icon-#{nth($icon, 1)}, 
    %icon-#{nth($icon, 1)} {
        content: "\#{nth($icon, 2)}";
    }
}

问题是content:线路上的反斜杠.我需要它用于字符编码,但它逃避变量插值,输出如下所示的CSS:

.icon-wifi {
  content: "\#{nth($icon, 2)}";
}

像这样添加一个反斜杠:content: "\\#{nth($icon, 2)}";输出这个CSS:

.icon-wifi {
  content: "\\600";
}

有没有办法让Sass在保持变量插值的同时只用一个反斜杠输出CSS？

我使用的是Angle 7.0.1和Angle Material 7.0.2，我想添加字体真棒5.4.2图标，并且尝试按照fontawesome网站上的步骤操作，但是我无法获得字体真棒图标字体。

第一：

npm install --save-dev @fortawesome/fontawesome-free

然后在styles.scss中添加：

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';

并在_variables.scss中添加：

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

现在在app.component.ts中添加：

import { MatIconRegistry } from "@angular/material";

[...]

constructor(
    public matIconRegistry: MatIconRegistry,
  ) {
    matIconRegistry.registerFontClassAlias ('fas');  // tried with 'fas' and with 'fa'
  }

最后我打算用以下命令打印字体很棒的图标：

<mat-icon mat-list-icon fontIcon="fas github"></mat-icon>  // tryed also with 'fas-github', 'fasGithub', 'github', 'fa-github', 'fa github' and 'faGithub'

但是从未打印过字体超赞的图标字体。我错过了一些重要而又显而易见的东西，但是现在我没有看到它。

我正在使用我的客户端提供的图标字体中的大图标作为Web应用程序索引页面上的标题徽标.徽标大小为设备宽度的60%,包含一个大圆形徽标(约占图标的40%),文本在下方,宽度为60%,在纵向模式下设备.

我将带有文本的徽标作为一个矢量图标字体图标,因为客户希望文本与CI要求的品牌完全一致.

_____###_____
____#####____
_____###_____
Slogan is here

它在桌面预览和我的谷歌nexus 4 Dolphin浏览器上看起来不错,但是在Chrome(在nexus上),口号被切断了,就像这个"Slogan is h".如果我切换到横向,它会再次正确显示.

.header-box-logo {
  color: #fff;
  font-size: 6.4rem;
  margin: 1rem auto;
  display: inline-block;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'iconfontnamehere';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

我正在使用基础5和iconmoon的自定义版本.我无法向您展示演示,因为所有图像都受NDA约束.

我在这里不知所措,知道为什么会这样吗？

我用Fontastic.me创建了一个iconfont.除了Android 4.2.2和4.3的原生浏览器(例如:现代三星平板电脑)外,它的效果很好.在这些浏览器中,整个字体的字符没有宽度.使用Fontastic.me(甚至是它自己提供的字体)制作的每种字体都会出现这种情况.当使图标居中(水平)时,这是一个主要问题.

我已经设置了一个网页来测试它:http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/icons-reference.html.粉红色显示角色的宽度.下面的截图正常行为与AndroidBrowser行为进行比较: http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/fontastic.png

我确定这是因为Fontastic,因为当我使用Icomoon作为fontgenerator时,问题不会发生.我也通知了主人,但他说他无法调查,因为他现在不知道如何在他的Mac上安装Android模拟器.

有没有人知道这里发生了什么？是什么导致角色空间崩溃？

首先我想说我知道这个问题类似于：

如何让导入的css字体/图标对shadow dom中的元素产生影响？

事实并非如此，也没有帮助。

问题：我最近决定使用 ShadowDOM 来封装我的项目中的样式。一开始我认为它按预期工作，但我注意到一些来自外部 CSS 文件的图标消失了。重要的是要注意，这些样式是外部的，并且进行更改的可能性是有限的。

我已经准备了代码来演示该问题（请参阅下面的代码片段）。

一切似乎都工作正常，除了 @font-face

正如您所看到的，包含带图标的外部 CSS 文件的 HTML 在 ShadowDOM 之外按预期工作。我也想在 ShadowDOM 中使用它。

我怎样才能做到这一点？

注意：如果您检查开发工具，网络选项卡中的 CSS 路径存在问题，但这是 SO 片段问题。如果您在本地运行该代码片段，则网络中一切正常。

const body = document.getElementsByTagName('body')[0];
const wrapper = document.querySelector('.wrapper')

const handleAddToShadowClick = (param) => {
  const host = document.querySelector('#shadowHost');
  if(param === 'insideShadow') {
    const shadowRoot = host.attachShadow({mode: 'open'});
     shadowRoot.innerHTML = firstComponent
  } else {
    const shadowRoot = host;
    wrapper !== null ? body.removeChild(wrapper): '' 
    shadowRoot.innerHTML = firstComponent
  }
}

const firstComponent = …

来自 Font Awesome 我想在我的网络项目中使用新的 Bootstrap 图标。不幸的是，就我必须插入的代码量而言，包含 Bootstrap 图标似乎更加乏味。

我正在寻找什么：

以图标为例bi-chevron-right。有没有办法使用 Bootstrap Icons 作为字体？伪代码：

<i class="bi bi-chevron-right"></i>

这种方式有几个好处：

• 简单干净地包含图标。
• 由于项目的所有图标仅包含 1 个外部文件，因此加载时间更短。
• 放置实际图标库的位置更加灵活（考虑选项 b），如果您更改库的路径，则必须更新所有引用！）。
• 无需对实际图标大小进行硬编码，因为这可以通过纯 CSS 进行控制。

文档目前仅提供以下内容：

该文档当前提供了多种插入图标的方法。所有这些都包含一些需要编写的代码。

a) 直接嵌入SVG：

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>

b) 或使用 SVG 精灵：

<svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="/path/to/bootstrap-icons.svg#chevron-right"/>
</svg>

c) 或链接外部图像：

<img src="/path/to/bootstrap-icons/chevron-right.svg" …

我试图让一个搜索按钮在firefox上看起来很好.这是一个输入提交,使用标志性字体,白色背景和边框半径,如下所示:

display: block;
width: 60px;
height: 60px;
line-height: 60px !important;
padding: 0;
background: white;
border: 0;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;
font-family: 'iconic';
color: #bad104;
font-size: 5em;

它必须看起来像这样(chrome和IE完全呈现我的代码):http://img341.imageshack.us/img341/6590/kogy.png

但是当我在firefox上使用相同的代码时,我得到的是:http://img17.imageshack.us/img17/953/jms4.jpg

我在两个浏览器上查看了dom检查器,当我查看"计算值"时,它不会在chrome(行高:60px)和firefox(行高:67px)上呈现相同的内容.

我从现在开始尝试的一切都是失败:/我希望你们能为我帮助:)

谢谢 !

有一个网站http://game-icons.net/提供了大量的开源图标。迄今为止，已有 1345 个 SVG 文件。我很乐意将它们用于我现在正在进行的网络项目。合乎逻辑的步骤是将它们转换为图标字体。通常，我只会将它们上传到https://icomoon.io/app/#/select/font瞧……但是！

这些图标是黑色矩形上的反向白色符号。我可以在 Illustrator 中反转颜色，但某些图标具有重叠的形状，当 icomoon 尝试将它们设为黑色透明时，这会破坏它们。

示例： http: //game-icons.net/lorc/originals/archery-target.html 圆圈是白色的，不透明。

如何将具有重叠形状的黑白 SVG 文件拼合为 icomoon 友好的黑色透明 SVG？

我的愿望是使字体也开源并将其发送回网站管理员以供每个人使用。