精华内容
下载资源
问答
  • 阿里矢量图库
    2022-07-27 18:34:49

    一、阿里矢量图标(字体图标)

    网址:iconfont-阿里巴巴矢量图标库

    1.使用步骤

    1.登录阿里矢量图标网站

    2.搜索想要的图标且加到购物车

    3.点击右上角的购物车

    4.选择下载代码,下载完成后解压文件

    5.把下载的文件放到你的项目中

    6.引入iconfont.css文件或者iconfont.js文件

    使用三种方式:下载代码

    1、Unicode 方式引用

    Unicode 是字体在网页端最原始的应用方式,特点是:

    • 兼容性最好,支持 IE6+,及所有现代浏览器。

    • 支持按字体的方式去动态调整图标大小,颜色等等。

    • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

    注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

    使用步骤如下:

    第一步:引入项目下面生成的 fontclass 代码:

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

    第二步:挑选相应图标并获取字体编码,应用于页面

    <span class="iconfont">&#x33;</span>

    2、font-class 方式引用

    font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

    与 Unicode 使用方式相比,具有如下特点:

    • 兼容性良好,支持 IE8+,及所有现代浏览器。

    • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。

    • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

    • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

    使用步骤如下:

    第一步:引入项目下面生成的 fontclass 代码:

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

    第二步:挑选相应图标并获取类名,应用于页面:

    <span class="iconfont icon-xxx"></span>

    " iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

    3、Symbol方式引用

    这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

    • 支持多色图标了,不再受单色限制。

    • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。

    • 兼容性较差,支持 IE9+,及现代浏览器。

    • 浏览器渲染 SVG 的性能一般,还不如 png。

    使用步骤如下:

    第一步:引入项目下面生成的 symbol 代码:

    <script src="./iconfont.js"></script>

    第二步:加入通用 CSS 代码(引入一次就行):

    <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    //改变样式
        .icon{
            width: 100px;
            height: 100px;
            font-size: 20px; 
            display: block;
        }
    </style>

    第三步:挑选相应图标并获取类名,应用于页面:

    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-xxx"></use>
    </svg>

    2.引入字体图标第二种方式:添加至项目

     项目引入:
        1.选好图标添加至项目
        2.选择要添加的项目(如果没有项目点击右上角新建项目),点击确定
        3.下载至本地
        4.解压文件,把文件放到代码中
        5.正常使用
    ​
         添加新的图标
         1.把新的图标选好之后,点击添加项目,选择你要添加的项目
         2.下载至本地
        3.解压文件,把文件放到代码中(此时下载的这个文件包括上次选的图标,也包括这次选的新的图标)
        4.正常使用
    ​
       添加新的图标下载文件后,把原来的文件替换掉,再把iconfont.css和iconfont.js文件链接替换一下即可
    ​
        与下载代码的区别:
        下载代码:
          如果添加新的图标,需要再新下载一个文件,且这个文件的图标与上个文件的图标不能在一个文件中,是两个独立的文件
    ​
        项目引入:
          如果添加新的图标,可以把这些图标添加到已有的项目文件,这样原来的图标和这次新添加的图标就可以在新的一个文件里了

    二、文本溢出处理显示省略号

    1、单行文本溢出显示省略号

    方法1:省略号

    单行文本: width:200px;设置盒子的宽度(限制宽度) white-space:nowrap;设置文本不换行 overflow:hidden;溢出隐藏 text-overflow:ellipsis;文本溢出的显示省略号

    <style>
    .box{
        width:200px;
        background-color:red;
        height:40px;
        line-height:40px;
        /* 关键代码 */
        text-overflow: ellipsis; /* 溢出显示省略号 */
        overflow: hidden; /* 溢出隐藏 */
        white-space: nowrap;  /* 强制不换行 */
    }
    </style>
    ​
    <body>
    <div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰带 38157</div> 
    </body>

    方法2:伪元素

      <style>
            .box {
                width: 200px;
                height: 40px;
                line-height: 40px;
                background-color: orchid;
                
                overflow: hidden;/* 溢出隐藏 */
                white-space: nowrap;/* 强制不换行 */
                position: relative;/* 子绝父相 */
    ​
            }
            .box:after {
                content: "...";
                position: absolute;
                right: 0px;
                bottom: 0px;
                /* 设置宽度可以微调省略号的盒子大小,盖住多余的文字 */
                width: 20px;
                background-color: red;
            }
        </style>
    </head>
    ​
    <body>
        <div class="box">
            可以沉迷,可以抱怨,可以奔溃,可以抱怨,可以奔溃,人要有自愈能力
        </div>
    </body>

    2、多行文本溢出显示省略号

    方法1:伪元素

    <style>
        .box {
            width: 200px;
            /* 通过行高和高度控制显示的行数 */
            height: 120px;
            line-height: 30px;
    ​
            background-color: red;
            position: relative;
            /* 文本两端对齐方式 */
            text-align: justify;
            /* 溢出隐藏 */
            overflow: hidden;
    ​
        }
    ​
        .box:after {
            content: "...";
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: red;
            /* 设置宽度可以微调省略号的盒子大小,盖住多余的文字 */
            width: 20px;
            background-color: red;
    ​
        }
    </style>
    <body>
        <div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带带 38157</div>
    </body>
    ​

    说明:

    1. 可能文字未超出行的情况下也会出现省略号

    2. 将height设置为line-height的整数倍,防止超出的文字露出(通过行高和高度控制显示的行数 )。

    3. 给:after添加背景可避免文字只显示一半。

    方法2:弹性盒

    width:200px;设置盒子的宽度(限制宽度) ​ display:-webkit-box;将对象作为弹性伸缩盒子模型显示 ​ -webkit-line-clamp:2;用来限制在一个快元素显示的文本行数 ​ -webkit-box-orient:vertical;设置盒子子元素的排列方式

    overflow:hidden;溢出隐藏

       <style>
            .box2 {
                width: 200px;
                line-height: 30px;
                background-color: pink;
                /* 旧版弹性盒 */
                display: -webkit-box;
                /* 弹性盒子元素垂直排列 */
                -webkit-box-orient: vertical;
                /* 控制要显示的行数 */
                -webkit-line-clamp: 4;
                /* 溢出隐藏 */
                overflow: hidden;
            }
        </style>
    ​
    <body>
    ​
        <div class="box2">
            可以沉迷,可以抱怨,可以奔溃,,可以抱怨,可以奔溃,人要有自愈能力可以沉迷,可以抱怨,可以奔溃,,可以抱怨,可以奔溃,人要有自愈能力
        </div>
    </body>

    更多相关内容
  • 阿里矢量图库使用

    2019-10-15 15:00:51
    官方网址:https://www.iconfont.cn/ 先准备好github账号用来登录 对想要的图标点击添加入库 点击右上的小车,点击... ... 在Font class选项卡中,会生成css网址。这个css文件可以直接在项目中引用,也可以下载后使用。...

    官方网址:https://www.iconfont.cn/
    先准备好github账号用来登录

    对想要的图标点击添加入库
    在这里插入图片描述
    点击右上的小车,点击加入项目
    在这里插入图片描述
    之后进入我的项目,点击生成代码
    在这里插入图片描述
    Font class选项卡中,会生成css网址。这个css文件可以直接在项目中引用,也可以下载后使用。

    点击复制代码可以获得相应字体图标的class
    在这里插入图片描述
    完整html代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1458751_3c7uutqrmrj.css"/>
    	</head>
    	<body>
    		
    		<i class="iconfont icon-iconfonticon-dingwe"></i>
    		<i class="iconfont icon-haofangtuo400iconfont2dianti"></i>
    	</body>
    </html>
    

    上面是在线使用方法,如果离线使用,需要点击下载至本地
    在这里插入图片描述
    将下载后的zip解压后方法项目中,直接引用css文件
    示例

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="font_test/iconfont.css"/>
    	</head>
    	<body>
    		
    		<i class="iconfont icon-iconfonticon-dingwe"></i>
    		<i class="iconfont icon-haofangtuo400iconfont2dianti"></i>
    	</body>
    </html>
    

    下载的文件中会有一个demo_index.html文件,直接用浏览器打开,会看到相应文档,很方便。
    在这里插入图片描述

    展开全文
  • .ttf .woff .woff2 为了兼容不同浏览器 是表示icon的一些格式文件吧,类似平常我们设置字体样式一样,也需要对应的样式文件(个人理解) 阿里矢量图库使用方法 1.1 在html文件中引入 1.2 在vue项目中引入 2.icomoon...

    阿里矢量图库使用方法 

    step1:找到你需要的图标,并将需要的图标加入购物车

    鼠标放在你需要的图标上就会显示加入购物车标识

     

     step2  点击右上角购物车标志,将需要的icon添加☞项目

    这里也可以点击“下载代码”按钮下载需要引入的文件,添加☞项目方便后续添加新的icon

    如果没有项目点击“添加至项目新建”

     step3 下载需要引入的文件

    导航栏资源管理==》我的项目==》点击下载==》下载至本地

     下载解压后的文件目录:

    demo_index.html是示例教程可以先打开看看

    .ttf .woff .woff2 为了兼容不同浏览器 是表示icon的一些格式文件吧,类似平常我们设置字体样式一样,也需要对应的样式文件(个人理解)

    阿里矢量图库使用方法 

    1.1 在html文件中引入

    1.2 在vue项目中引入

    2.icomoon使用方法


    1.1 在html文件中引入

    step1 在工程根目录新建一个文件夹,与.html同级目录

    将解压出的文件除去带有demo字样的其他文件,复制到新建的文件夹中

    step2 引入

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- -----------------看这里🌼---------------------- -->
        <link rel="stylesheet" href="./alifonts/iconfont.css" type="text/css" />
        <!-- 使用灰色图标,只需要加载iconfont.css 文件就可以使用了 -->
        <!-- -----------------看这里🌼---------------------- -->
        <script src="./alifonts/iconfont.js"></script>
        <!-- 使用彩色图标一般使用svg格式引入,需要添加这个js文件 -->
    </head>
    
    <body>
         <!-- --------这个是unicode引用(灰白黑)🌼------>
        <span class="iconfont">&#xf4cf;</span>
         <!-- --------这个是svg方式引用(彩色)🌼------>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-aixin"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-baocun"></use>
        </svg>
    </body>
    
    </html>

     效果

    补充:

    1.font-class引用方式这里没有做测试,具体的使用方法都可以参考解压文件中的demo_index.html

    2.unicode 兼容性好,svg兼容性ie9+

    3.这里的icon可以当作字体一样来使用,设置字体样式的属性,在icon身上同样有效

    1.2 在vue项目中引入

    step1 在项目src->assets下新建文件夹fonts 将一下文件复制到新建文件夹中(与1.1相似)

     step2 在main.js中引入

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    //------------看这里是🍟🍔🌭-------/
    // 在这里引入css 和js js对应svg格式(彩色)
    import './assets/fonts/iconfont.css'
    import './assets/fonts/iconfont.js'
    router.push('home')
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
        el: '#app',
        router,
        components: { App },
        template: '<App/>'
    })

    step3.在home.vue中使用

    <template>
        <div>
            hello home home home home page!
            <i class="iconfont">&#xf4cf;</i>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-aixin"></use>
            </svg>
    
            <button @click="getnewpage">homepage</button>
        </div>
    </template>

    效果 :

    !需要新增icon时,在自己建立的项目中添加好后重新下载,要将原来的引入文件全部替换后即可生效

    icomoon的使用

    icomoon的使用与阿里图库基本类似

    step1 打开官网点击这里

     step2 点选需要的图标后点击GenerateFont下载

     step3 解压后可以直接将fonts文件夹放入需要引入的项目目录

    同样这里可以查看demo.html查看中的示例教程

    注意❗❗使用icomoon的时候新增icon需要这里导入selection.json

    然后继续添加icon之后再重新下载替换项目中原来引入的格式文件

    以上内容那里写的不对的欢迎指正~

    那里不清楚的评论区一起讨论~

     

    展开全文
  • 1.打开阿里巴巴矢量图标库官网https://www.iconfont.cn/login? 注册或登录 2.搜索自己想要的所有图标,添加入库; 3.新建项目,添加所有图标至项目中; 3.1.打开自己的购物车 3.2.新建项目 不要直接下载代码,或...

    1.打开阿里巴巴矢量图标库官网https://www.iconfont.cn/login? 注册或登录

    在这里插入图片描述

    2.搜索自己想要的所有图标,添加入库;

    在这里插入图片描述

    3.新建项目,添加所有图标至项目中;

    3.1.打开自己的购物车

    在这里插入图片描述

    3.2.新建项目

    在这里插入图片描述
    不要直接下载代码,或缺少所需文件
    在这里插入图片描述
    在这里插入图片描述

    4.创建完成自动跳转至项目页面,下载至本地即可,解压后将所有文件放入项目的同一文件夹中;

    在这里插入图片描述
    解压之后的文件 放入项目同一文件目录下
    在这里插入图片描述
    在这里插入图片描述

    5.项目中引入即可

    #引入css样式
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css">
    #使用图标代码
     <i class=" iconfont icon-guanliyuan"></i>                   
    

    6.图标名字的修改和获取

    在这里插入图片描述
    在这里插入图片描述

    Symbol 中编辑名称 复制代码即可

    展开全文
  • 问题引发的原因来自最近在写微信小程序教学项目,项目中的一个图片是我随手切的,因为之前在Vue项目中一直在使用阿里矢量图库,我就想把阿里矢量图库ico图标集成到自己项目中,百度看了一些博客跟着做都引入不成功,研究...
  • 阿里矢量图库使用方法

    千次阅读 2018-10-23 12:42:48
    阿里矢量图库使用方法:https://blog.csdn.net/tanx17/article/details/74357626
  • 阿里巴巴矢量图库的引用以及更新

    千次阅读 2022-03-29 16:48:35
    1、打开阿里巴巴矢量图库的官方网站 iconfont-阿里巴巴矢量图标库 2、登录 3、
  • 阿里巴巴矢量图标库地址: https://www.iconfont.cn/ 第一步:输入你想要的图标加入购物车 第二步:点击右上角购物车 第三步:点击添加到项目 第四步:点击更新代码,然后点击下载到本地 第五步:windows+R,cmd打开dos...
  • 1.进入阿里矢量图标库官网 官网传送门 注册 => 登录 这里就省略了.. 2.选择你需要的icon a.下载svg到本地 b.进入到"我的项目",如下图: c.然后复制css地址在浏览器打开,复制里面代码,地址如图: 3.在vue...
  • 1登录阿里矢量图标库 iconfont-阿里巴巴矢量图标库 创建项目 上传项目需要的svg图标 2安装脚手架,(作用:通过命令自动生成需要的图标资源代码,) 下载 | Node.js (nodejs.org) 安装后执行下面命令 1安装 ...
  • 阿里矢量图库的正确打开方式

    千次阅读 2017-12-15 15:58:51
    1、登录阿里巴巴矢量图库,将需要的图标加入购物车;并存储为项目; 2、在对应的项目下找到你加载的 图标(可以修改名称);查看在线连接(有如下几种方式); 3、font-class引用 font-class是unicode...
  • https://blog.csdn.net/tang_jian_dong/article/details/83342826案例 --X ... https://www.iconfont.cn/阿里矢量图库 http://www.bitbug.net/ ico制作 Symbol 引用 这是一种全新的使用方式,应...
  • 前端如何使用阿里巴巴矢量图库的图标 1.首先搜索想要的图标   阿里巴巴矢量图库http://www.iconfont.cn,可以github登录或者微博登录 2.添加购物车 3.添加至项目   没有项目可以新建一个项目,添加到项目的...
  • 进入阿里矢量图官网2.新建项目3.找到自己需要的矢量图4.在需要的组件内进行引入5.在放置矢量图7.修改html(class中粘贴矢量图代码,一定要加iconfont !!!!) 1. 进入阿里矢量图官网 阿里适量图库 2.新建项目 新建一个...
  • 字体图标一、自定义字体二、阿里巴巴矢量图库使用三、字体图标 前端在处理字体的时候,一般都会引用大多数电脑已经安装好的字体,如微软雅黑、宋体等等,从而来保证浏览器中字体渲染效果一致,而我们如果引用了一些...
  • // 阿里巴巴矢量图库 全选 var icons = document.querySelectorAll("span[title='添加入库']"); for(var i = 0; i < icons.length; i++){ var item = icons[i]; item.click(); } alert("选择完成!"); ps: ...
  • 以前居然不知道可以这么玩,都是下载好了手动倒入2333 ...阿里矢量图标库 登录完成后搜索自己喜欢的图标 - 收藏入库 收藏 入库 点击图标管理,在我的项目中新建一个项目 新建项目 添加入库的图...
  • 加入自己项目需要用的所有图标 下载后解压得到一个 新建一个css文件夹 把这些存放进去 ,也可以只存放画圈圈的后缀...他是一个矢量字体图标 设置字体大小和颜色就是改变他自己大小和颜色 以上2种方法都行 ...
  • 在前端的网页制作中,经常要使用到小图标来美化自己的网页,或者使用自定义的字体来美化,现在来看看如何用css3的属性font-face来结合阿里矢量
  • 阿里矢量图标、Unicode 方式引用、font-class 方式引用、Symbol方式引用 ​
  • 【随手记录】 微信小程序开发的时候,就是为了引用图标,踩了一个坑,折腾了大半个小时,始终看不出来到底哪里有问题,按理说是跟着开发文档走得呀,不应该出错才对,但是事实很打脸,报错现象是 : ...
  • iconfont (阿里巴巴图标库) 网址:http://www.iconfont.cn icons8 网址:https://icons8.com iconfinder 网址:https://www.iconfinder.com
  • 把iconfont.css里面的东西全部复制到app.wxss里面,全局引用。复制完之后app.wsxx里面的@font-face要变,怎么改呢,看图。3.将你在购物车中图标放入自己的分组项目中(多项目时方便管理)...1.首先先进入阿里矢量库。...
  • vue -使用阿里矢量

    2022-05-01 11:20:15
    vue中使用阿里矢量图 1,选择图标,下载本地 阿里矢量图标库网址: https://www.iconfont.cn 选择图标添加到项目中: 点击下载至本地,下载完成后可以把用不到的删掉 如上图所示,可以把圈红线的文件删掉; 2,...
  • 阿里巴巴图标iconfont网址 iconfont网址 :https://www.iconfont.cn/ 登录网站 搜索相应图标 将想要的图标添加到 购物车车里; 添加图标到项目 新建项目完成后,自动跳转,之后选择下载至本地; 4. 图标下载 5. ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,068
精华内容 427
关键字:

阿里矢量图库