<!DOCTYPE html>

<html lang="en" ng-app="app">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" href="../iconfont/iconfont.css">

    <script src="../lib/jquery/jquery.min.js"></script>

    <script src="../lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <script src="../lib/angular/angular.js"></script>

    <script>

        var app = angular.module('app', []);

        app.controller('myCtrl', function ($scope) {

            $scope.isOpen=localStorage.getItem("temp")||true;

            $scope.$watch('isOpen',function (newVal, oldVal) {

                localStorage.setItem("temp",newVal);

            }, true);

        });

    </script>

    <style>

        span{

            cursor: pointer;

            font-size: 26px !important;

        }

    </style>

</head>

<body ng-controller="myCtrl">

<div class="container">

    <span ng-class="{true: 'iconfont icon-yinliangkai', false: 'iconfont icon-yinliangguanbi1'}[isOpen]" ng-click="isOpen = !isOpen"></span>

    <div>{{isFirst}}</div>

</div>

</body>

</html>

angular中阿里矢量图标使用的更多相关文章

  1. vue使用阿里矢量图标

    官方注册注册 1.加入购物车 在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目:     2.下载 到我的项目中,将图标下载到本地     3.解压引入 在vue项目的asset ...

  2. 前端福利之盘飞那个 "阿里矢量图" （转）

    一.准备工作 1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源, ...

  3. 在vue项目引入阿里巴巴矢量图标

    1.在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目: 2.到我的项目中,将图标下载到本地 3.在vue项目的assets文件夹下新建一个iconfont文件夹(名字自定义),将 ...

  4. 阿里UX矢量图标库–最强大的矢量图标库（Icon font制作力荐工具）

    继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库 ...

  5. Vue中如何引入第三方icon库（阿里巴巴矢量图标库）

    1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车           ...

  6. [Learn AF3]第六章 App Framework 3.0中的内置矢量图标

    AF3的内置矢量图标 介绍:要使用af3中的图标,必须首先引入icon.css,由于文件中已经内置了字体文件数据,因此不需要引入字体文件支持. <link rel="styleshee ...

  7. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  8. 如何在微信小程序中使用阿里字体图标

    第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 --->  点击“添加入库”  ...

  9. （原创）IconFont（矢量图标字体）在Winform中的应用

    一.前言 很多时候,使用矢量图形可以带来非常美观的界面效果,比如SVG的使用.但是Winform原生是不支持显示SVG图像的,所以退而求其次,可以使用IconFont来实现相似的矢量效果. 先来个图解 ...

随机推荐

  1. kubernetes系列(十七) - 通过helm安装dashboard详细教程

    1. 前提条件 2. 配置https证书为secret 3. dashboard安装 3.1 helm拉取dashboard的chart 3.2 配置dashboard的chart包配置 3.3 he ...

  2. 2020年Dubbo30道高频面试题！还在为面试烦恼赶快来看看！

    前言 Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的,只有在分布式 ...

  3. vue ：关于引用jquery的二三问题

    webpack版本:3.6.0 首先是引用jquery. 有两个地方要改. 1 (项目地址)/build/webpack.base.conf.js 2 (项目地址)/src/main.js webpa ...

  4. Python3基础语法快速入门

    01 Python 简介 Python 是一种高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.Python 由 Guido van Rossum 于 1989 年底在荷兰国家数学和计算机科学 ...

  5. 7个获取访问者真实IP的方法，速学！！！

    通常情况下,网站访问并不是简单地从用户的浏览器直达服务器,中间可能部署有CDN.WAF.高防.例如,采用这样的架构:“用户 > CDN/WAF/高防 > 源站服务器” .那么,在经过多层代 ...

  6. OFD呼之欲来、来之跚跚，谁之罪？

    软件国产化的浪潮势不可挡,美国逼得逾甚,我们压迫感逾强,唯有奋起直追方慰平生之志. 在板式文档领域,pdf已成为国际标准,亦可称为美国标准:它在该领域一枝独秀,已形成一览众山小之势! pdf出道20余 ...

  7. 交通网最短路径长 dp c++

    // // Created by Arc on 2020/4/26. // /* * 城市交通线路,单向通行,道路之间可能有不通,每条连同的路之间都有相应的费用 * 求从起点到终点的最小费用 * * ...

  8. Python简单的语句组

    Python简单的语句组: ''' if 条件1: 条件1满足时,需要运行的内容 ''' num = 10 if num % 6 == 4: print("num 对 6 的取模结果是 4& ...

  9. Django学习路3

    1.打开 Data Source alt insert 打开 Data Source 找到 db.sqlite3 确定 Download 下载后 TestConnection 测试是否成功 2.项目下 ...

  10. PHP xml_set_object() 函数

    定义和用法 xml_set_object() 函数允许在对象中使用 XML 解析器.高佣联盟 www.cgewang.com 如果成功,该函数则返回 TRUE.如果失败,则返回 FALSE. 语法 x ...