Ionic3 scss引入font-awesome4.7

最新推荐文章于 2021-11-18 10:34:49 发布
最新推荐文章于 2021-11-18 10:34:49 发布
阅读量1k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mate_ge/article/details/82807457
版权

首先是需要下载font-awesome的依赖文件，在工程src目录下新建一个libs目录放着，

放进去以后，将fonts文件夹移动到src/assets目录下，然后将font-awesome文件夹下，除了scss目录以外其他所有无用的文件删除，删完之后目录结构是这样的

在这里插入图片描述

然后在全局的scss文件里面加入这两行代码就引入了： 我这里是app.scss

在这里插入图片描述

注意的是，图中的相对路径要保证没有问题

$fa-font-path: "../assets/fonts/font-awesome/fonts";
@import "../libs/font-awesome-4.7.0/scss/font-awesome";
martsforever
关注
专栏目录
font-awesome-4.7.0
11-08
font-awesome-4.7.0
【html和css】Fontawesome最新的4.7.0版，675个图标
最新发布
【敦厚的曹操】的专栏
05-19 443
500px address-book address-book-o address-card address-card-o adjust adn align-center align-justify align-left align-right amazon ambulance american-sign-language-interpreting anchor android angellist angle-double-down angle-double-
FontAwesome 4.7版本的下载与使用案例
ailian_f的博客
09-27 3584
最近在看一个Java Web项目，其中有一种图标  挺有意思，看源代码发现使用了一种很有意思的字体FontAwesome，所以这里记录一下使用过程。 1、下载字体库       免费网址：http://fontawesome.dashgame.com/ 2、把解压后的文件直接放进项目工程中     3、在jsp中直接引用字体       4、测试效果       5、更多效果可以...
【ionic 3】怎么使用Iconfont添加图标
玫瑰与鹿°
06-18 2417
很多时候，ionic自带的图标库并不能满足我们的要求，那我们可以向外界寻求帮助。比如阿里巴巴矢量图标库（Iconfont）。 寻找图标并下载
FontAwesome::Sass(5.x版)使用帮助。
weixin_30544657的博客
06-30 124
FontAwesome::Sass(5.x版)https://fontawesome.com/icons?d=gallery&m=free只能使用免费的。在app/assets/stylesheets/application.scss中载入@import "font-awesome-sprockets"; @import "font-awesome";Rails Helper us...
ionic3-awesome:ionic3自定义组件及常用例子 演示地址
05-02
ionic3-awesome About 此项目是ionic3开源项目 。贡献代码请提供email。 来了就留个 :paw_prints:吧，star一下证明你来过 :squinting_face_with_tongue: 如果对您对此项目有兴趣，可以点 "Star" 支持一下 谢谢！ ^_^...
ionic-native-http-connection-backend：Ionic和iOS的CORS问题的解决方案
01-30
ionic-native-http-connection-backend 该库添加@ionic-native/http （如果可用）作为与Angular的Http和HttpClient的连接后端 动机 现在，Apple促进/要求使用WKWebView而不是不推荐使用的UIWebView ，Ionic已通过其...
Angular-ionic-native-http-connection-backend.zip
09-18
Angular-ionic-native-http-connection-backend.zip,离子型和iosionic本机http连接后端cors问题的解决方案,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular...
ionic-coffee-scss-scaffold:支持咖啡，scss。 自动注入
06-15
Ionic-Coffee-Scss 应用程序库 转到以快速入门Ionic 的起始项目，可选择支持使用自定义 SCSS。 脚手架由制成并添加一些改进。 额外的东西 添加了咖啡和 scss 支持 自动注入 bower js,css 到 index.html 自动注入已...
Ionic-3-Angular-5-Web3-Boilerplate:Ionic 3，Angular 5和Web3样板
05-08
带有Web3样板的另一个Ionic 3和Angular 5 以下存储库为打算用Ionic 3，Angular 5和Web3编写的项目提供了样板。 此我编写的非常相似，因为它只是为了集成的变体。 打算允许您的应用程序与进行通信。 安装 安装NPM...
Font Awesome的使用
LvFengBing_23的博客
10-15 378
（公司的项目用到 Font Awesome这个图标字体库，所以研究了下。这是我接触的第二个图标库，第一个接触的是Iconfont阿里巴巴的） 官网：Font Awesome 是一套绝佳的图标字体库和CSS框架。 Font Awesome 网址：http://fontawesome.dashgame.com/ 下载后，引入css文件里的 font-awesome.min.css文件 例子：（...
怎样在angular7/ionic 4 中使用font awesome图标
weixin_33856370的博客
06-13 534
安装 npm istall font awesome for angular 仅例举一些免费的图标 npm istall @fortawesome/fontawesome-svg-core npm istall @fortawesome/free-solid-svg-icons npm istall @fortawesome/angular-fontawesome 复制代码用法一 src/ap...
scss的简单使用
weixin_41897680的博客
06-22 510
scss的简单学习
Vue 第三方字体图标引入 Font Awesome
热门推荐
qq_27868533的博客
03-21 1万+
Font Awesome        用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利，不管是在加载还是修改方面，字体图符远远优于图片。但是饿了吗封装的Element UI提供的字体图符少之又少，又不想用图片，只能自己扩展图符咯。       &nb
vue scss 如何加载字体 font
学习笔记
11-05 1458
vue scss 如何加载字体 font 以 ~@/ 开头就可以了 以相对路径 ../ 的方式是不可以的 @font-face { font-family: "Impact"; src: url("~@/assets/font/ImpactPureNumber.ttf"); } @font-face { font-family: "LLPixel"; src: url("~@/assets/font/LLPixel_only_Letter.ttf"); } ...
scss中字体库的使用
weixin_43844975的博客
11-29 4069
scss中字体库的使用 引入字体文件到css->font下 .scss文件中引入该字体库 定义a:before{ cotent: ‘\e614’ }
Webpack：打包css、scss、font等样式文件（4）
黑卡米的专栏
09-28 394
本文假设你已阅读前章节的内容。 安装打包文件 //将css文件挂载到html的head的style里 npm install style-loader --save-dev //分析css文件，将多个文件合并 npm install --save-dev css-loader //将sass文件编译成css npm install sass-loader node-sass --save-dev //增加厂商前缀，如：-webkit-transform npm i -D postcss-loade.
angular使用font-awesome
xif3681的博客
07-04 1685
font-awesome http://www.fontawesome.com.cn/get-started/   使用 CSS 复制 font-awesome 目录到你的项目中 在<head>处加载font-awesome.min.css如下。 <link rel="stylesheet" href="path/to/font-awesome/css/font-aw...
【Sass/SCSS】预加载器中的“轩辕剑”
归子莫的博客
11-18 505
【Sass/SCSS】预加载器中的“轩辕剑” 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 说明 随着前端技术发展的越来越迅速，前端的样式也需要更加贴近时代的审美，那么CSS就需要承担更多的工作，（强调！这不是煽情！这是宣讲背景。????），为了给CSS怼上去，预加载器出现了，没错，CSS用上了武器。Sass/SCSS——预加载器中的“轩辕剑”，这也不是我帮它吹，是它自己说的，下图为例。 官网地址：SASS中文网 什么是Sas
Ionic自定义插件开发指南-Android版
"这份文档详细介绍了如何在Ionic框架下编写Android版的自定义插件，包括插件的常用命令、创建插件的步骤、以及以开发身份证阅读器为例的实战教程。" 在 Ionic 框架中，开发自定义插件是扩展原生功能的关键步骤。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值