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.效果


相关文章
|
2月前
|
前端开发 JavaScript 开发者
CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
【5月更文挑战第26天】CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
22 2
|
2月前
|
前端开发 JavaScript Shell
stylus详解与引入
stylus详解与引入
|
2月前
vue3.0 vite引入SVG iconfont
vue3.0 vite引入SVG iconfont
57 0
|
2月前
|
前端开发 JavaScript 安全
70k Star 的 Tailwind CSS 为何这么火?(上)
70k Star 的 Tailwind CSS 为何这么火?
|
2月前
|
前端开发 JavaScript IDE
70k Star 的 Tailwind CSS 为何这么火?(下)
70k Star 的 Tailwind CSS 为何这么火?
108 0
|
JavaScript
Vue3 + Vite + TS项目引入iconfont图标(Svg方式)
前言 每一个项目都避免不了使用各种各样的图标,如果我们使用了 UI 组件库,比如说 ELement 等,那么组件库有一些封装好的图标供我们使用。但是项目是多变的和复杂的,组件库提供的图标很多时候不能满足需求,这个时候就需要我们自己引入想要的图标了。 今天介绍的便是如何将 iconfont 阿里图标库的图标引入到我们的 Vue3 项目中来!
3913 1
Vue3 + Vite + TS项目引入iconfont图标(Svg方式)
|
12月前
|
前端开发
react中引入svg
react中引入svg
112 0
|
存储 JavaScript
ICONFONT字体图标库使用
ICONFONT字体图标库使用
233 0
|
JavaScript
Vue3.js中使用svg:vite-plugin-svg-icons
Vue3.js中使用svg:vite-plugin-svg-icons
601 0
|
前端开发
react笔记之引入FontAwesome
react笔记之引入FontAwesome
132 0