精华内容
下载资源
问答
  • 字体图标库
    更多相关内容
  • FontAwesome是一款基于CSS框架的网页字体图标库,它完全,为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可用CSS的样式,除此之外,还有SVG框架,流行前端库(如
  • 字体图标库

    2022-03-08 15:02:47
    字体图标库 1. 阿里巴巴矢量图标库 icofont 2. Font Awesome 3. Glyphicons 字体图标 4. 框架中 融入字体图标 定义通用的类名: iconfont ; 定义图标的基础样式 <p class="iconfont icon-xxx"><...

    字体图标库
                1. 阿里巴巴矢量图标库 icofont 
                2. Font Awesome 
                3. Glyphicons 字体图标
                4. 框架中 融入字体图标


            
            定义通用的类名: iconfont ; 定义图标的基础样式
             <p class="iconfont icon-xxx"></p>
             icon-xxx 类名就是具体的图标名字


            iconfont使用步骤 
                在线使用方式:依赖网络
                1. 登录账号
                2. 搜索图标,添加入库
                3. 把图标添加到项目(如果已存在项目, 则直接添加,没有存在,创建 项目并添加)
                4. 生成在线的链接地址(字体css文件地址) , 复制地址
                5. 在项目中使用字体图标 
                    link 标签引入 css文件
                    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3229633_voyq0yqotu.css">

                    在标签上添加指定的类名和字体图标名字
                      <p class="iconfont icon-huajiaoshuixianhuameiguihua"></p>

            本地的使用方式:
                前三步是一样,
                4. 下载至本地 (把所有的图标源文件下载到自己的电脑上)
                5. 解压 , 修改文件夹名为 font / fonts
                6. 使用字体图标 (源文件中存在一个实例文件demo_index.html )

                具体使用两种方式:
                    1. unicode 编码格式
                        需要定义字体 ,   @font-face  

                    2. font class 类名方式
                        通过 link标签把css 文件引入进来即可,使用预定义好的类名

          @font-face  :@font-face CSS at-rule 指定一个用于显示文本的自定义字体;字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数,从用户本地查找指定的字体名称,并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。

     

    展开全文
  • 特别说明:本元件库为线形字体图标库,与FontAwesome图标库同类,含免装字体直接使用版。(本资源只限产品经理的Axure使用,前端或后端使用勿拍) 本图标库名为Unicons线形字体图标库,具有2种特性,分别为线形图标...
  • 盘点目前字体图标库

    千次阅读 2021-12-17 21:31:29
    1. 老牌的Font Awesome 2. 丰富的Iconfont 3. 可自定义的IconPark

    (按发布时间排序)

    1.老牌的 Font Awesome

    在这里插入图片描述

    Font Awesome
    已经更新到了版本5,目前免费图标有1608个。
    中文官网:https://fa5.dashgame.com

    2.丰富的Iconfont (阿里巴巴出品)

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

    Iconfont有着非常丰富的图标,有很多用户上传图标到这里,你可以找到各种各样的图标,但要注意是否可商用。Iconfont支持项目管理、图标图标上传。
    官方链接:https://www.iconfont.cn

    3.可自定义的IconPark(字节跳动出品)

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

    IconPark目前有2400+个图标,可以自定义图标的大小、线条粗细、风格、端点和拐点的类型,另外支持React/vue组件方式调用,支持项目管理,项目图标上传。
    官方链接:https://iconpark.oceanengine.com

    还有许多字体图标库,待有时间更新。

    展开全文
  • 字体图标可以为前端又有了一种更加方便高校的图标使用方式:展示的是图标,本体属于字体。 看一下淘宝中购物车: 看着是一个图片,其实具有字体的特征。 可以通过浏览器工具调整一下其颜色: 可以

    前面聊了一下精灵技术,虽然减少了请求服务器的次数,让用户有了一种错觉网速提高等优点,但是这个也有其弊端:

    • 图片文件是很多小图标整合,所以图片本身很大。
    • 图片本身在放大和缩小会失真。
    • 还有一旦图片整合好的话,然后再网页引入后,想要修改的话可能有点复杂。

    这个时候就有了一个技术出现,那就是字体图标(iconfont).

    字体图标可以为前端又有了一种更加方便高校的图标使用方式:展示的是图标,本体属于字体。

    看一下淘宝中购物车:

    在这里插入图片描述

    看着是一个图片,其实具有字体的特征。

    可以通过浏览器工具调整一下其颜色:

    在这里插入图片描述

    可以看出和修改文字的颜色效果几乎差不多。

    先说一下字体图标的优点:

    • 轻量级:一个图标字体要比一系列的图像要小,一旦字体加载了,图标就马上渲染出来,也减少了服务器的请求。
    • 灵活性:本质就是文字,所以可以随意修改颜色,阴影等效果。
    • 兼容性:毕竟本身就是文字的特征,几乎所有的浏览器都支持。

    还有一句话要补充,虽然字体图标优点很多,但是不能替代精灵技术,只能对工作中图标部分技术的提升和优化。

    简单的说就是结构和样式比较简单的小图标,就使用字体图标。如果结构和样式复杂的只能用到精灵图了。

    字体图标下载

    不要问我字体字体图标如何制作,客观原因:很多时候我们使用的是第三方的,主观原因:我也不会制作。

    一般常用的网站有两个:

    • icomoon字体: 网站:https://icomoon.io/

      IcoMoon成立于2011年,推出了第一个自定义图标字体生成器,允许用户选择所需要的图标,使它们成为字型。该字库内容种类繁多,非常全面,但是却是国外服务器。

    在这里插入图片描述

    • 阿里 iconfont字库:https://www.iconfont.cn/

      阿里M2UX的一个iconfont字体图标的字库,包含了阿里所有的图标库,可以使用AI制作图标上传生成。(重要的使免费)

    在这里插入图片描述

    下载步骤

    • 步骤一:

      注册一个账户。

    • 步骤二:

      选择自己喜欢的图标。

    在这里插入图片描述

    • 步骤三:

      自己现在一个系列的坐标,然后进去如果就选择一个直接可以下载,如果向弄一组,就将其放入购物车,然后下载一组。

      在这里插入图片描述

    • 步骤四:

      打开购物车下面有三个选择栏:

    在这里插入图片描述

    添加自己项目:可以将图标加入自己的项目,其实这个方便如果后期原来的一些项目的图标添加或者修改的话,可以通过管理整个项目进行修改。个人建议这种方式最好。如果没有项目可以创建一个。

    下载素材:这个直接下载称图片,一般不会这样下载,毕竟打算使用字体图标了,就不会选择这个选项了。

    下载代码:这个很简单就是下载字体图标的代码,其是一个压缩包,如果下载的解压后目录如下,也是字体图标可以使用的根本原因。

    在这里插入图片描述

    • 步骤五:

      选择的是添加自己的项目后,打开导航栏中的资源管理,然后找到我的项目:

    在这里插入图片描述

    具体 Unicode,Font,Symbol三个有什么区别呢,看一下官网解释(以及使用步骤):

    https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code

    • 步骤六:

    下载后解压文件目录是:

    在这里插入图片描述

    创建一个 fonts 文件夹,然后把第五步下载下来的文件,复制到 fonts 文件夹内即可。

    其中 demo_index.html 和 demo.css 文件其实是可以不放入到项目中的,但是为了方便查看样式名称和对应图标,还是放入到项目中比较方便。如果你实在不想放到项目中,那就把它们删了吧,之后想查看图标样式就登录iconfont官网进入图标项目中查看即可。

    例子使用

    记得引入两行代码:

        <link rel="stylesheet" href="fonts/iconfont.css">
        <script src="fonts/iconfont.js"></script>
    
    

    毕竟你导入了资源,这个地方就是引用的意思,简单理解的话,就是说类似java中的导入包。

    然后看一下iconfont.css的内容:

    在这里插入图片描述

    然后引入到我们自己页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试文档</title>
    
        <link rel="stylesheet" href="fonts/iconfont.css">
        <script src="fonts/iconfont.js"></script>
    
        <style>
         .test{
             color: #d10000;
             font-size: 40px;
         }
        </style>
    
    </head>
    <body>
    <div class="iconfont test"></div>
    
    <hr>
    <div class=" con-address-book test"></div>
    <hr>
    <!--这个地方才是真正的引入-->
    <div class="iconfont icon-address-book test"></div>
    </body>
    </html>
    

    在这里插入图片描述

    但是在后面学过伪元素时候,如果在css中引用呢?

    @font-face {
        font-family: "iconfont"; /* Project id 3235518 */
        src: url('自己放路径/iconfont.woff2?t=1646883009688') format('woff2'),
        url('自己放路径/iconfont.woff?t=1646883009688') format('woff'),
        url('自己放路径/iconfont.ttf?t=1646883009688') format('truetype');
    }
    
    选择器 ::after {
        content: "\e619";
        font-family: iconfont;/*这个一定要添加,不然不然不会显示*/
        
    }
    
    
    展开全文
  • 阿里字体图标库使用规则,教你怎样注册阿里字体图标库,下载图标到项目中,以及怎样在项目中使用,需要注意的地方,希望对你有帮助
  • 阿里巴巴字体图标库

    2020-09-15 16:19:11
    阿里巴巴字体图标库 网址 https://www.iconfont.cn/
  • 封装自己的web字体图标库 CSDN:jcLee95 邮箱 :291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/article/details/123492756 相关文章推荐: flutter中使用图标(含自定义图标图):...
  • Vue项目中引用‘阿里巴巴字体图标库iconfont’

    千次阅读 多人点赞 2021-06-23 08:09:52
    在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标,像element-ui、iview-ui中都提供了icon图标 上面的两个ui框架中都提供了很多图标我们至于要直接运用即可,但是在我们的开发需求中很多
  • 在vue项目中使用字体图标库,完整版详细步骤
  • vue 动态加载阿里云字体图标库
  • 本文我们就来一起学习一下iconfont字体图标库的使用吧。 效果图: 首先,搜索一下iconfont: 选择第一个链接,点进去: 登录进去,我这边用的是自己的github账号。登录成功后,选择我的项目,去新建一个项目: ...
  • 2.阿里巴巴字体图标库使用方法 (1).注册账号 (2).创建项目 (3).找到喜欢的图标 (4).将自己喜欢的图标加入到项目中去 (5).生成代码并下载到本地 (6).将iconfont.css复制到项目中去 (7).在app.vue引入...
  • 如何在vue项目中使用第三方的字体图标库 以在vue项目中导入阿里字体图标库为例 1、打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 2、选择自己需要的字体图标,...
  • 引入阿里云字体图标库的方法

    千次阅读 2021-04-19 21:05:45
    文章目录前言1 在线字体图标库引入2 本地字体图标库引入 前言   引入阿里云字体图标有两种方法:一种是在线链接引入;另一种是下载后引入本地链接。   无论哪种方式都需要登陆才能执行后续操作,地址为:阿里...
  • svgs2fonts svg图标转字体图标库(svgs-> svg,ttf,eot,woff,woff2)。版本1.0.4安装npm i -g svgs2fonts验证svgs2fonts -v使用svgs2fonts {{srcpath}} {{distpath}} --options其中参数: srcpath:svg源文件路径...
  • 在微信小程序项目中需要用到字体图标,所以记录一下解决过程。因为比较喜欢使用阿里巴巴矢量图标库,就以此为例来说。 一、去阿里巴巴矢量图标库下载需要的图标 进入https://www.iconfont.cn/,在我的项目中添加...
  • fa --图标字体库--

    2021-01-19 11:25:30
    fa --图标字体库--
  • 高颜值、简单易用的字体图标库
  • 右边点击新建项目 3、项目创建完毕,在上方搜索框中,输入要使用的图标名称,找到需要的图标,右键添加至购物车。 4、点击右上角的购物车>添加至项目,选择刚刚创建的项目,点击确定。 5、此时自动跳转到项目内...
  • 1.svg图片的使用 1.css引入svg图片并修改大小 html <div class="icon"></div> css .icon{ background-image: url(/icon.svg); width:19px; height:24px; background-size: 19px ...1.2.1. 方式1(修改
  • 作为一个前端程序员,iconfont阿里字体图标库肯定有所耳闻,这里基本可以找到你想要的图标,并且提供多种格式供您选择。 可能有的人会说,我们UI设计师会切好图发到我们手里。可万一要做的是自己项目,或者公司...
  • icomoon 及阿里字体图标库使用,进入官网选择喜欢的图标字体,进行一些预设,下载本地或者在线使用即可。
  • 1.新建:fonts文件夹 2.打开阿里巴巴字体图标官方网站:...5.在mani.js里面引入字体图标文件 import './assets/fonts/iconfont' import './assets/fonts/iconfont.css' 6.在组件中使用: <span> ...
  • FontAwesome 字体图标库 使用

    千次阅读 2019-05-19 10:24:06
    Font Awesome(以下简称fa)是一套绝佳的图标字体库和CSS框架。 fa被设计为与内联元素一起使用。 <i>和<span>标签被广泛应用于图标。(推荐使用<i>,标签更简短,且语义更精确) 当使用fa的图标重叠...
  • Canvas 绘制字体图标库

    千次阅读 2020-10-26 10:08:15
    1.首先,你要引入一个字体图标库 – iconfont 阿里的字体图标库 将链接复制到浏览器,将获取到的css 代码复制到自己的项目 代码中 其他的不一一赘述,没有用过 iconfont 的 可以看 这里 2.新建一个canvas 3.主要...
  • 草莓图标,是创造狮原创设计的一套前端字体图标库,所谓字体图标icon font就是将矢量格式的图标(一般是SVG)设计成web字体的形式,让使用图标也变得像调用字体一样简单。
  • 阿里字体图标库iconfont的使用详解

    千次阅读 2022-03-21 11:09:17
    阿里字体图标库iconfont的使用详解
  • 前端工程师最常用的字体图标库

    千次阅读 2018-12-19 14:37:23
    字体图标:顾名思义就是图标一样的字体,可以设置大小,颜色等,操作方便便捷。 icommon:官网 iconfont:官网 font Awesome:官网 glyphicons:官网 weather icons:官网 lonicons:官网 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,879
精华内容 19,551
关键字:

字体图标库