精华内容
下载资源
问答
  • Icon图标 & 自定义Icon图标 博主很久之前就想使用Element-UI,总是因为学习后端的技术鸽了很久(博主目前是偏后端),这里博主通过Vue来整合Element-UI(不是Vue项目整合Element-UI,Vue项目整合Element-UI不久...

    Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标

    博主很久之前就想使用Element-UI,总是因为需要学习后端技术鸽了很久(博主目前是偏后端),这里博主通过Vue项目来整合Element-UI。

    引入Element-UI

    npm安装

    Vue项目整合Element-UI会用到,这里博主介绍一下。

    npm i element-ui -S
    
    • i:是install的简写。
    • -S:即--save(保存),包会被注册到package.jsondependencies里面。
    E:\workspace\WebStorm\blog\project>
    E:\workspace\WebStorm\blog\project>npm i element-ui -S
    ...
    + element-ui@2.14.1
    added 6 packages from 6 contributors in 7.474s
    

    在这里插入图片描述
    在Vue项目入口文件main.js中添加:

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.use(ElementUI)
    

    在这里插入图片描述
    这样就可以在Vue项目中使用Element-UI了。

    修改App.vue

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
        <i class="el-icon-platform-eleme"></i>
        <i class="el-icon-delete-solid"></i>
        <i class="el-icon-loading"></i>
        <p class="el-icon-folder-add"></p>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    很明显Element-UI使用成功了。
    在这里插入图片描述
    CDN

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    

    建议使用CDN引入Element-UI时锁定版本,以免将来Element-UI升级时受到非兼容性更新的影响。

    如版本2.14.1

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
    

    引入这些文件后,就可以使用Element-UI了。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>images</title>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="../js/vue.js"></script>
        <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
    </head>
    <body>
      <div id="app">
          <i class="el-icon-platform-eleme"></i>
          <i class="el-icon-delete-solid"></i>
          <i class="el-icon-loading"></i>
          <p class="el-icon-folder-add"></p>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </body>
    </html>
    <script>
        var vue = new Vue({
            el: '#app'
        })
    </script>
    

    效果和上面是一样的,Element-UI使用成功了。
    在这里插入图片描述
    Javascript文件引入顺序如下,因为Element-UI是基于Vue2的,所以要先引入Vue。

        <script src="../js/vue.js"></script>
        <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
    

    Icon图标

    Element-UI提供了一套常用的图标集合。直接通过设置类名为el-icon-iconName来使用即可,上面的代码中也有涉及。

          <i class="el-icon-platform-eleme"></i>
          <i class="el-icon-delete-solid"></i>
          <i class="el-icon-loading"></i>
          <p class="el-icon-folder-add"></p>
    

    查看有哪些图标:

    自定义Icon图标

    Element-UI提供的图标还是有限的,所以需要自定义Icon图标,通过下面代码就可以自定义Icon图标,很简单吧(知道CSS即可)。

    <style>
        .el-icon-dog{
            background: url(../img/dog.png) center no-repeat;  /*使用自己的图片来替换*/
            background-size: contain;
        }
        .el-icon-dog:before{
            content: "dog";                                    /*before属性中的content文本是用来占位的,必须有*/
            font-size: 50px;                                   /*可以设置字体大小来确定图标大小*/
            visibility: hidden;                                /*使用visibility: hidden;来隐藏文字*/
        }
    </style>
    

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>images</title>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="../js/vue.js"></script>
        <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
    </head>
    <body>
      <div id="app">
          <i class="el-icon-platform-eleme"></i>
          <i class="el-icon-delete-solid"></i>
          <i class="el-icon-loading"></i>
          <p class="el-icon-folder-add"></p>
          <p class="el-icon-dog"></p>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </body>
    </html>
    <style>
        .el-icon-dog{
            background: url(../img/dog.png) center no-repeat;  /*使用自己的图片来替换*/
            background-size: contain;
        }
        .el-icon-dog:before{
            content: "dog";                                    /*before属性中的content文本是用来占位的,必须有*/
            font-size: 50px;                                   /*可以设置字体大小来确定图标大小*/
            visibility: hidden;                                /*使用visibility: hidden;来隐藏文字*/
        }
    </style>
    <script>
        var vue = new Vue({
            el: '#app'
        })
    </script>
    

    效果如下图所示:
    在这里插入图片描述
    很明显效果符合预期。
    在这里插入图片描述

    Vue项目整合Element-UI、Icon图标以及自定义Icon图标就介绍到这里。

    写博客是博主记录自己的学习过程,如果有错误,请指正,谢谢!

    展开全文
  • EasyUI 中自定义组件 icon 图标

    千次阅读 2019-07-02 14:37:11
    EasyUI 自带的 icon 就 二十多个,大多数情况下都不够用,需要自定义icon图标才能满足需求。 今天将自定义的方法记录一下,积累起来: 步骤一:上网找到合适的图标下载下来; 推荐一个免费的图库:...

    EasyUI 中自定义组件 icon 图标

    EasyUI 中自带的 icon 图标:

    EasyUI 自带的 icon 就 二十多个,大多数情况下都不够用,需要自定义icon图标才能满足需求。

    今天将自定义的方法记录一下,积累起来:

    步骤一:上网找到合适的图标下载下来;

    推荐一个免费的图库:https://www.easyicon.net/(下载16*16的png图标 , 示例:data.png)

    步骤二:

    复制到easyui文件夹下的themes文件夹的icons文件夹里

    步骤三:

    在themes文件夹下找到icon.css,添加以下语句:

    .icon-data{
    	background:url('icons/data.png') no-repeat center center;
    }

    接着去浏览器测试就可以了……

     

    其实还真的遇到了问题:图标在IE浏览器中可以正常显示,在谷歌无法正常显示。

    解决:

    1、首先查看了路径,上上下下的配置也检查了一遍,发现没有什么问题;

    2、通过google浏览器的元素审查发现,在icon.css中新定义的样式没有被加载,原因是缓存造成的,清除缓存就行了!

    (按F12或右上角点开--更多工具--开发者工具)

     

     

     

    展开全文
  • VUE设置浏览器icon图标

    万次阅读 2018-06-10 23:04:17
    Vue怎么设置左上角icon图标呢?步骤如下:(1)、提前把icon图标copy到static目录下(2)、在index.html页面添加 &lt;link rel ="shortcut icon" type="image/x-icon" href="static/...

    Vue怎么设置左上角icon图标呢?步骤如下:

    (1)、提前把icon图标copy到static目录下


    (2)、在index.html页面添加 <link rel ="shortcut icon" type="image/x-icon" href="static/favicon.ico">


    (3)、保存页面刷新浏览器即可


    啦啦啦~~希望能帮到小伙伴们大笑大笑

    展开全文
  • layer icon图标汇总

    千次阅读 2017-08-09 16:01:25
    layer icon图标是1-7layer.msg('n', {icon: n});

    layer icon图标是1-7

    layer.msg('icon: n', {icon: n});

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    展开全文
  • Ext JS 1713个icon图标

    千次下载 热门讨论 2014-07-18 23:53:21
    由于最近在研究Extjs4.1.1,没想到Extjs没有自带的iconCls所使用的图标样式css,就是用那个写那个的,纠结了半天,网上也找了好久,还是自己写了个批量处理程序,集合了1713个png小图标,都是Extjs原生态的,直接...
  • CSDN markdown icon 图标

    千次阅读 2017-12-15 17:43:50
    CSDN Markdown 编辑器 icon 图标
  • icon图标制作

    千次阅读 2016-03-08 18:52:32
    常用的免费icon网站  1.图标宝:http://ico.58pic.com/pack/2257_8.html      2.easyicon ...3.图标制作软件 IconWorkshop ...最好的图标软件是什么,如何制作icon图标呢。平面设计、图像制作、多媒体...
  • HTML 网页引入icon图标

    千次阅读 2020-07-13 21:13:16
    icon: 以京东为例子 首先获取jd的icon图标 例子 网站有图标的都可以用 xxx.com/favicon.ico获取图标 <link rel="shortcut icon" type="favicon.ico" href="img/jd.ico"> 效果:
  • vue引入外部icon图标

    千次阅读 2020-07-03 15:34:45
    在标签里面加上suffix-icon属性 2.下载第三方icon图标,ex阿里图标,并放到assts里面 3.在main。js中导入 4.阿里图标库方法,载入已经在main导入了 5.将在属性里面添加 iconfont 图标名
  • Web前端开发 icon图标 转 web字体图标

    千次阅读 2017-07-28 10:32:58
    在我们大多数的项目当中,icon图标是必不可少的,有的一个一个单独切片,或者将它们拼接组合起来(图片合成技术:css sprite)从而减少请求,方便调用等,但是随着项目的逐渐扩展壮大,图标越来越多,到最后难以维护...
  • js动态添加页面的icon图标

    万次阅读 2019-04-02 15:24:59
    js动态添加页面的icon图标 (function() { var link = document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = '/images/366/favicon.ico'; document.get...
  • Icon.jsx文件 配置模板 import { Icon } from 'antd';... scriptUrl: '//at.alicdn.com/t/font_1448993_tmsmao7el7b.js'//复制(阿里巴巴矢量图标库)中的icon图标地址代码 }); export default I...
  • ant design分享-icon图标自定义菜单图标 本过程使用 iconfont.cn上的 设置icon前缀 import { Icon } from 'ant-design-vue'; import Vue from 'vue' const JihaoIcon = Icon.createFromIconfontCN({ scriptUrl:'/...
  • 前端项目添加自定义icon图标步骤

    万次阅读 2016-12-01 01:56:16
    在使用MUI框架开发过程中,往往需使用到各式各样的icon图标,而MUI的icon图标库提供的资源并不多,由于icon图标属于字体样式,如果使用图片替代的话,缺点比较明显,比如放大失真,每次联网都要加载等。所以往往需要...
  • 在uniapp中如何使用icon图标

    千次阅读 2020-12-15 14:29:31
    在uniapp中使用icon图标的方法: 1.首先注册icon账号 2.挑选自己中意的图标加入购物车,加入购物车 然后添加到自己的项目中 3.在自己的项目中选择font-class 在新网址地址栏打开图片文件 4.把这些文件全部ctrl a...
  • 修改favicon.icon图标

    千次阅读 2018-09-03 18:26:37
    1.favicon.icon的图标在网站中一般默认在根目录下 2.使用在线生成favicon.icon图片 网址http://www.faviconico.org/ 3.保存生成的favicon.icon图标 将图标放到根目录下面 ...
  • ElementUI:tree给节点添加icon图标

    千次阅读 2020-12-08 08:32:51
    tree给节点添加icon图标
  • web 前端Icon图标网站

    千次阅读 2017-09-08 14:39:24
    web 前端Icon图标网站 官方网站:http://fontawesome.io/icons/#web-application
  • 添加自定义字体icon图标

    千次阅读 2018-06-21 18:39:38
    先提供一个比较好的自定义icon图标库阿里图标库所以接下来的使用主要就是以从上面提供的网址下载的icon图标为例(如果不会使用,请参考使用下载完之后是一个压缩包,解压后,只需要根据我们的需要把相应的文件放入...
  • MFC中Icon图标大小定制

    千次阅读 2017-03-21 11:39:40
    MFC中Icon图标大小定制
  • vue在列表和下拉框中显示icon图标

    千次阅读 2020-05-15 15:53:12
    vue在列表和下拉框中显示icon图标一、 在项目中引入阿里云icon图标二、 在data中定义icon图标列表三、 在下拉框中显示icon图标四、 在列表中显示icon图标 一、 在项目中引入阿里云icon图标 进入: 阿里图标官网 ...
  • 微信小程序-icon图标

    千次阅读 2020-01-31 19:52:29
    微信小程序-icon图标 demo.wxml <!-- 小程序中的字体图标 1 type icon的类型 有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear 2 size 大小 3 color icon的颜色...
  • elementui icon图标大全

    万次阅读 2019-09-25 16:13:26
    Element内置丰富的图标库,主要有以下2种用法: 设置类名el-icon-xxx,通常使用i元素 在Element部分组件中设置icon属性 页面效果 以下是通过上述两种用法制作的简单导航工具条: 在这里插入图片描述 参考文献 ...
  • vue-element-admin之修改侧边栏的icon图标以及图标颜色

    千次阅读 热门讨论 2020-06-11 09:24:28
    1.修改侧边栏的icon图标 ???? 如果在admin提供的icon库中没有你需要的图标,可以到https://www.iconfont.cn/上选择并生成自己的业务图标库 在admin指南中可以看到这句话,我们来实际操作一波 打开网址后,可以看到 ...
  • 扩展 layui icon 图标库 为 阿里图标库或Font Awesome
  • element-ui icon 图标无法正常显示问题

    千次阅读 2019-08-27 10:04:12
    element-ui icon图标无法正常显示 使用vue-cli3脚手架搭建的项目,在打包文件上服务器的时候,其他的css,js样式都能正确加载出路径,但是element的icon图标却不能正常加载出来。 加载的路径...
  • icon图标无法显示

    千次阅读 2017-02-16 18:13:17
    开发java web项目时icon图标没办法显示 或 图标没有正常显示 或 图标有时出现有时不出现,如图 我的解决方法 1、可能还没有从网络上下载下来--连网等待下载(若是被拦截,可能下载下来也会被拦截) 2、可能被拦截了...
  • app 的 icon图标 有黑边

    千次阅读 2018-03-29 14:05:20
    app 的 icon图标 有黑边解决1:美工给你的icon图应该是这样的吧四周留有余白,那么你就让美工 给你重新切一套icon图,记住图标四周不要留余白 像这样。解决2:你是不是切了圆角的图啊,改成正方形的图片就可以了 .....
  • Element-Ui组件(二)Icon 图标

    万次阅读 多人点赞 2019-06-03 16:16:39
    Element-Ui组件(二)图标应用 本文参考Element官方文档: http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库,主要有以下2种用法: 设置类名el-icon-xxx,通常使用i元素 在...
  • 系统(HTML页面)设置icon图标

    万次阅读 2018-12-19 10:39:50
    从系统安全及使用便捷等角度出发,设置系统页面的icon图标是基本常识,设置方法如下,备用。 &lt;link rel="icon" href="./images/favicon.ico" type="image/x-icon" /&gt;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 193,156
精华内容 77,262
关键字:

icon图标