<!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. patelinux 安装

    参考文档:https://china.xilinx.com/support/documentation/sw_manuals/xilinx2017_2/ug1144-petalinux-tools-r ...

  2. 本周六 Apache DolphinScheduler & Doris 将联合线上 Meetup

    活动背景 2020年,大数据成为国家基建的一个重要组成,大数据在越来越多的领域展现威力.随着大数据的应用场景越来越多,大家对数据的响应速度和数据加工工作流的方便程度也提出了更高的要求.在这种背景下,相 ...

  3. jmeter压力测试报错:java.net.BindException: Address already in use: connect || java.net.SocketException: Socket closed

    windows提供给TCP/IP链接的端口为 1024-5000,并且要四分钟来循环回收它们,就导致我们在短时间内跑大量的请求时将端口占满了,导致如上报错. 解决办法(在jmeter所在服务器操作): ...

  4. O、Θ、Ω、o、ω，别再傻傻分不清了！

    前言 本篇文章收录于专辑:http://dwz.win/HjK,点击解锁更多数据结构与算法的知识. 你好,我是彤哥,一个每天爬二十六层楼还不忘读源码的硬核男人. 前面几节,我们一起学习了算法的复杂度如 ...

  5. springboot文件上传 流的方式 后台计算上传进度

    //代码 public static void main(String[] args) throws Exception { String path = "f:/svn/t_dictiona ...

  6. OpenLDAP on Centos7

    一.环境准备 echo nameserver 114.114.114.114 > /etc/resolv.conf ##更改DNSecho 192.168.0.190 hello.com > ...

  7. jmeter 命令行模式（非GUI）运行脚本，察看结果树结果为空，解决办法；

    jmeter的bin目录下,打开命令窗口,执行jmeter -n -t jmeter脚本 -l 结果: 执行结束后,聚合报告打开结果,显示错误率100%:察看结果树中打开结果,显示无数据: 解决办法: ...

  8. API返回延迟,FPM重启后恢复之后又重现 问题解决方案

    背景 最近在提供后台API时,提供了一个简单逻辑的接口 部署在测试环境,自测没问题,提交测试 突然有一天,接口响应延迟严重,几乎每次都是3-4秒返回 这对于一个接口来说,肯定是有问题的 于是便有了以下 ...

  9. 将HTML5封装成android应用APK

    借鉴了网上很多的教程终于是把整个过程走通了,最主要的还是墙的问题.... 先是要搭建环境(每一步都要检查,确保安装正确): 1.安装 nodejs 淘宝镜像: npm install -g cnpm ...

  10. PHP cal_days_in_month() 函数

    ------------恢复内容开始------------ 实例 针对指定的年份和历法,获取一个月中的天数: <?php$d=cal_days_in_month(CAL_GREGORIAN,1 ...