代码之家 › 专栏 › 技术社区 › Alan Gaytan

如何将打开的图标添加到angular 2项目

angular

Alan Gaytan · 技术社区 · 6 年前

我创建了一个angular项目,向其中添加了bootstrap,但我注意到新版本的bootstrap(版本4)没有图标库,因此我使用以下方法安装它:

npm install open-iconic

但我不知道如何将其添加到我的项目中,根据网页,我需要添加以下两行:

<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

所以我尝试在angular cli上添加css的路径。json但我的按钮没有显示图标,有人能帮我吗?,

提前谢谢。

2 回复 | 直到 6 年前

Jannie 6 年前

将“..node\u modules/open-icologic/font/css/open-icologic-bootstrap.min.css”添加到中的“样式”选项。角度cli。json文件。

YaakovHatam 6 年前

如果有人来问这个问题,而上面的解决方案对他不起作用,并且您在尝试使用SCS时出现了错误,包括在您的 styles.scss :

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js./src/styles.scss) (Emitted value instead of an instance of Error) CssSyntaxError: node_modules\open-iconic\font\css\open-iconic-bootstrap.scss: Can't resolve '../node_modules/open-iconic/font/css/open-iconic.eot' in 'src'

这是因为文件中的相对路径 open-iconic-bootstrap 指向 $icon-font-path: '../fonts/' !default; sass编译器认为根路径是 src/app (角根路径)

解决方案 在中的@import语句之前 样式。scss公司 推翻 $icon-font-path 指向正确路径的变量:

$icon-font-path: '~open-iconic/font/fonts/';
@import "~open-iconic/font/css/open-iconic-bootstrap.scss";

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前