ionic3 引入iconfont

简介: ionic3 引入iconfont

打开iconfont阿里官网

iconfont阿里图标地址


用gitlub账户登录即可


找到心仪的图标加入到自己的项目中


1.添加入库

1dc618a0ed9580ce8bfa6facb208c08f.png

2.点击购物车

5d4c6812c8535adbb050f4ddf2e1bce8.png

3.添加到项目

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

66ba272a0bfc97be54a5fa679e3d5482.png

4.选择下载到本地

1dc618a0ed9580ce8bfa6facb208c08f.png

5.讲下载的下面5个文件拷贝到ionic3的项目中的 assets目录下 新建fonts文件夹中,将原来的iconfont.css 修改扩展名为iconfont.scss

5d4c6812c8535adbb050f4ddf2e1bce8.png

6.引入到app.scss中

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

7.微调iconfont.scss,改成一个地方将iconfont的ont-family: “iconfont”;修改成font-family: “Ionicons”;

66ba272a0bfc97be54a5fa679e3d5482.png

88b9988b40447cb37c7e3c492d49867f.png

1dc618a0ed9580ce8bfa6facb208c08f.png

8. 程序中引用

5d4c6812c8535adbb050f4ddf2e1bce8.png

ionic3中这样引用

46a9d80a6e05e4e3b19d57a0ee70bcdf.png


9.效果


相关文章
|
1天前
|
开发框架 前端开发 Android开发
Ionicons图标库: 让网页栩栩生辉,Ionic Framework的经典之作,图标库新标杆!
欢迎来到程序视点,我是小二哥。今日分享:Ionicons,一个免费开源、高性能的图标库,适用于Web、APP及桌面应用。它拥有1300多个图标,支持按需加载,提供多种风格选择,易于集成使用。详情见文,欢迎点赞分享!
10 2
|
3月前
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
7月前
|
前端开发 JavaScript Shell
stylus详解与引入
stylus详解与引入
|
7月前
vue3.0 vite引入SVG iconfont
vue3.0 vite引入SVG iconfont
169 0
|
前端开发 Android开发 iOS开发
React Native 引入Icon
React Native 引入Icon
121 0
|
12月前
|
前端开发 JavaScript
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css
|
12月前
|
前端开发 JavaScript
在React项目中使用 CSS Module
在React项目中使用 CSS Module
|
JavaScript
Vue3 + Vite + TS项目引入iconfont图标(Svg方式)
前言 每一个项目都避免不了使用各种各样的图标,如果我们使用了 UI 组件库,比如说 ELement 等,那么组件库有一些封装好的图标供我们使用。但是项目是多变的和复杂的,组件库提供的图标很多时候不能满足需求,这个时候就需要我们自己引入想要的图标了。 今天介绍的便是如何将 iconfont 阿里图标库的图标引入到我们的 Vue3 项目中来!
4631 1
Vue3 + Vite + TS项目引入iconfont图标(Svg方式)
|
JavaScript 前端开发
|
前端开发
react笔记之引入FontAwesome
react笔记之引入FontAwesome
161 0