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月前
|
开发框架 前端开发 Android开发
Ionicons图标库: 让网页栩栩生辉,Ionic Framework的经典之作,图标库新标杆!
欢迎来到程序视点,我是小二哥。今日分享:Ionicons,一个免费开源、高性能的图标库,适用于Web、APP及桌面应用。它拥有1300多个图标,支持按需加载,提供多种风格选择,易于集成使用。详情见文,欢迎点赞分享!
39 2
|
3月前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
223 9
|
8月前
|
前端开发 JavaScript 开发者
CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
【5月更文挑战第26天】CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
81 2
|
8月前
vue3.0 vite引入SVG iconfont
vue3.0 vite引入SVG iconfont
189 0
|
前端开发 API
学习Vue3 第三十三章(css Style完整新特性)
默认情况下,作用域样式不会影响到 <slot/> 渲染出来的内容,因为它们被认为是父组件所持有并传递进来的。
187 0
学习Vue3 第三十三章(css Style完整新特性)
|
8月前
|
前端开发 JavaScript IDE
70k Star 的 Tailwind CSS 为何这么火?(下)
70k Star 的 Tailwind CSS 为何这么火?
204 0
|
8月前
|
前端开发 JavaScript 安全
70k Star 的 Tailwind CSS 为何这么火?(上)
70k Star 的 Tailwind CSS 为何这么火?
163 0
|
JavaScript
Vue3 + Vite + TS项目引入iconfont图标(Svg方式)
前言 每一个项目都避免不了使用各种各样的图标,如果我们使用了 UI 组件库,比如说 ELement 等,那么组件库有一些封装好的图标供我们使用。但是项目是多变的和复杂的,组件库提供的图标很多时候不能满足需求,这个时候就需要我们自己引入想要的图标了。 今天介绍的便是如何将 iconfont 阿里图标库的图标引入到我们的 Vue3 项目中来!
4825 1
Vue3 + Vite + TS项目引入iconfont图标(Svg方式)
|
前端开发 JavaScript
vue-ant design示例大全——icon与分隔符本地css/js资源
vue-ant design示例大全——icon与分隔符本地css/js资源
212 0
vue-ant design示例大全——icon与分隔符本地css/js资源
|
Web App开发 JavaScript
WebApp - Rem 自适应 JS 之精简版(flexible.js)
WebApp - Rem 自适应 JS 之精简版(flexible.js)
657 0
WebApp - Rem 自适应 JS 之精简版(flexible.js)

热门文章

最新文章

下一篇
开通oss服务