精华内容
下载资源
问答
  • icomoon
    2019-08-29 18:21:23
    1.在样式里声明字体:告诉别人我们自己定义的字体
    @font-face {  /*电脑中没有的字体,我们需要声明*/
    			font-family: 'icomoon';
    			src: url('fonts/icomoon.eot?7kkyc2');
    			src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    				url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    				url('fonts/icomoon.woff?7kkyc2') format('woff'),
    				url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    			font-weight: normal;
    			font-style: normal;
    		}
    
    2.给盒子使用字体
    span {
    			font-family: "icomoon"  /*一定保证上面的 font-family: 相同;*/
    		}
    
    3.盒子里面添加结构
    div::before {
    			font-family: "icomoon";   /*一定保证上面的 font-family: 相同;*/
    			font-size: 100px;
    			color: purple;
    			content: "\e908";
    		}
    
    追加新图标到原来库里面

    添加时原来的不能删除,继续使用,此时我们需要把压缩包里面的selection.json从新上传,然后,选中自己想要新的图标,重新下载压缩被,替换原来文件

    更多相关内容
  • React-IcoMoon :package: 零依赖使用 React-Icomoon,您可以轻松使用您在 icomoon 中选择或创建的图标。 Demo 安装 npm install react-icomoon 用法 您可以通过下载 selection.json 文件来使用您在 IcoMoon 上选择的...
  • 何为字体图标? ...更重要的是图片不能很好的进行缩放,因为放大和缩小可能会使图片失真,所以我们就开始使用字体图标。...这里我们主要来说一下icomoon字库的使用方法。 icomoon字库 1.下载方式 ①浏览器中输
  • axure icomoon free 图标库

    2018-12-22 11:28:16
    axure icomoon free 图标库,包含470个字体图标 ,补充字体库
  • icomoon.ttf

    2020-12-19 18:50:10
    这是一个icomoon.ttf
  • icomoon.woff

    2020-12-19 18:46:04
    这是一个icomoon.woff
  • icomoon.svg

    2020-12-19 18:45:13
    这是一个icomoon.svg
  • Axure 矢量素材 icomoon元件库,矢量素材SVG,提供SVG素材元件
  • icomoon-phantomjs 已弃用 我们选择弃用fontsmith及其库系列。 它们依赖于已弃用的 icomoon.io API,从未完全开发过(例如缺少 SASS 模板、多个引擎),并且已经过时(例如使用grunt@0.3 )。 虽然我们很想保持一切...
  • icomoon字体图标库

    2016-02-19 11:37:09
    很好用的一款字体图标库,大大优化网页图片的访问速度和大小
  • icomoon.eot

    2022-01-06 00:50:07
    icomoon.eot
  • IcoMoon - UI设计 - 图标

    2017-02-03 11:16:26
    IcoMoon - UI设计 - 图标
  • Traditionally font creation had been known as a difficult and demanding task, but thankfully building icon font sets, has become considerably easier thanks to easy online tools such as IcoMoon, ...
    Hieroglyphs -- 'old school' iconography

    photo: listentoreason

    照片:listentoreason

    An icon system can often become central design element in your web project. You can find many free or commercial icon sets on the web, and they are often included in major CSS frameworks (Bootstrap 3 Glyphicons is a perfect example).

    图标系统通常可以成为Web项目中的核心设计元素。 您可以在网上找到许多免费的或商业的图标集,它们通常包含在主要CSS框架中( Bootstrap 3 Glyphicons是一个完美的示例)。

    On some occasions, however, you may need more specific glyphs not included in a generic set. Or you may just want to better coordinate the design of your icons with the other design elements of your project. In these cases you’ll want to draw a new icon set from scratch.

    但是,在某些情况下,您可能需要通用集合中未包含的更多特定字形 。 或者,您可能只想更好地协调图标的设计与项目的其他设计元素。 在这些情况下,您需要从头开始绘制一个新的图标集。

    There are two widely-used methods to add a set of icons to your projects:

    有两种广泛使用的方法可以向项目中添加图标集:

    1. Web font

      网络字体
    2. SVG

      SVG

    Today I’m going to cover web fonts. We’ll cover the use of SVG in another article.

    今天,我将介绍网络字体。 我们将在另一篇文章中介绍SVG的用法。

    Traditionally font creation had been known as a difficult and demanding task, but thankfully building icon font sets, has become considerably easier thanks to easy online tools such as IcoMoon, Fontastic, or Fontello. Each allows you to build a font by either ‘cherry-picking’ pre-built icons from public libraries, or by uploading and compiling SVG files you’ve prepared yourself.

    传统上,字体创建被认为是一项艰巨而艰巨的任务,但幸运的是, 借助 IcoMoonFontasticFontello等简单的在线工具,构建图标字体集已变得相当容易。 每一种都允许您通过从公共库中“挑选”预先构建的图标来构建字体,或者通过上载和编译自己准备的SVG文件来构建字体。

    自带的图标 (BYO Icons)

    To build your own icon font, the first step is to design icons – we will use Illustrator for this task – and then save them as SVGs.

    要构建自己的图标字体,第一步是设计图标-我们将使用Illustrator来完成此任务-然后将它们另存为SVG。

    找到你的设计风格 (Find your design style)

    Before you start drawing, you need to define style properties for your glyphs such as stroke sizes, grid proportions and so on.

    在开始绘制之前,您需要为字形定义样式属性,例如笔触大小,网格比例等。

    Begin by doing some readability test at different sizes and build a template you will use to draw all your glyphs. It’s no use designing finely-detailed icons that don’t work at lower resolutions.

    首先进行一些不同大小的可读性测试,然后构建一个模板来绘制所有字形。 设计无法在较低分辨率下工作的精细图标是没有用的。

    It’s also very useful to sketch your font before drawing, also a very rough sketch (like the one below) will help you to find ideas for all the symbols you need.

    在绘制字体之前先绘制字体也是非常有用的,而且非常粗糙的草图(如下面的草图)将帮助您找到所需的所有符号的想法。

    A very very rough sketch

    You can then to decide on a grid size for your glyphs. My tip is to not draw directly at your target size (for example 16x16px) or at very big sizes either. Instead I’ve found that a grid of 60-80px side is often good for me. Scaling up or down from this size is generally successful.

    然后,您可以确定字形的网格大小。 我的提示是不要直接以您的目标尺寸(例如16x16px)或非常大的尺寸绘制。 取而代之的是,我发现60-80像素边的网格通常对我有利。 通常,从此大小扩展或缩小都是成功的。

    Of course, this is not a ‘set-in-stone’ type rule: project needs and experience may change on a case by case basis.

    当然,这不是“一成不变的”类型规则:项目的需求和经验可能会因案例而异。

    For this article, I chose to draw my icons with a stroke of 8px, without fill and set inside a grid of 64x64px.

    在本文中,我选择以8px的笔触绘制图标,而无需填充,并在64x64px的网格内进行设置。

    开始绘图 (Starting drawing)

    Illustrator artboards are very useful for this job: you can draw each glyph in a different artboard, keeping each in a single file. The artboards can be rearranged, renamed and can be exported as standalone SVG files (which is precisely what we need for IcoMoon).

    Illustrator画板对于此工作非常有用:您可以在不同的画板上绘制每个字形,并将每个字形保存在单个文件中。 这些画板可以重新排列,重命名,并可以作为独立的SVG文件导出(这正是IcoMoon所需要的)。

    Each artboard can also have independent axis coordinates, that will be very valuable for objects alignment, as we will see later.

    每个画板还可以具有独立的轴坐标,这对于对象对齐非常有用,我们将在后面看到。

    We can now start creating a new 64x64px Illustrator document:

    现在,我们可以开始创建一个新的64x64px Illustrator文档:

    Illustrator New document panel

    Note that you can start create all the artboards you need using the Number of Artboards option: I prefer to add artboards as I need them, but there is no reason why you can’t create all your artboards first.

    请注意,您可以使用“ 画板数量”选项开始创建所需的所有画板 :我更喜欢根据需要添加画板,但是没有理由您不能首先创建所有画板。

    The new document with the first artboard

    Now we can set up the grid. We want it to start from each artboard origin (the top-left corner) and to divide the artboard into a 8×8 checkerboard. Before doing that, let’s take a quick look at the way the Illustrator coordinates system works.

    现在我们可以建立网格了。 我们希望它从每个画板原点(左上角)开始,并将画板划分为8×8棋盘格。 在此之前,让我们快速看一下Illustrator坐标系的工作方式。

    Illustrator工作区 (Illustrator workspace)

    Illustrator workspace is composed of a canvas that contains one or more artboards.

    Illustrator工作区由包含一个或多个画板画布组成。

    Artboards are placed on the canvas starting from a point called the Global ruler origin. In addition every artboard has its own origin point and rulers as well.

    将画板从称为“ 全局标尺原点”的点开始放置在画布上。 此外,每个画板都有自己的起点和标尺。

    When you’re positioning new artboards using the Artboard tool, you will always use the global ruler. In almost all other cases, you will use the artboard ruler according to ViewRulersChange to Artboard (or Global) Ruler option.

    使用Artboard工具定位新的Artboard时 ,将始终使用全局标尺。 在几乎所有其他情况下,您将根据视图标尺更改为画板(或全局)标尺选项来使用画板标尺

    If you are using the Global ruler, every object you draw on any artboard is drawn in relation to that single origin point (i.e. the Global ruler origin). Otherwise coordinates refer to the origins of the artboard which contains it.

    如果使用全局标尺,则在任何画板上绘制的每个对象都是相对于该单个原点(即全局标尺origin )绘制的。 否则,坐标是指包含它的画板的原点。

    In short, using the Artboard ruler system:

    简而言之,使用Artboard标尺系统:

    • Artboards are placed in the canvas according to the Global ruler origin

      根据全局标尺的原点将画板放置在画布中

    • The objects we draw are placed in an artboard according to the Artboard ruler origin (in the screenshot below, you can see that the two squares have the same coordinates values even if they are placed in two different artboards).

      我们绘制的对象根据Artboard标尺的原点放置在画板上 (在下面的屏幕快照中,即使将两个正方形放置在两个不同的画板上,您也可以看到两个正方形具有相同的坐标值)。

    Illustrator workspace

    For this job, we will use the Artboard ruler, since it is more suitable for glyphs alignment.

    对于这项工作,我们将使用Artboard标尺,因为它更适合字形对齐。

    设置网格 (Setting up the grid)

    Illustrator’s grid is placed on the workspace starting from global ruler origin. You can set its properties choosing PreferencesGuides & Grid. Since we want our 64x64px canvas to be divided into 8 parts each side, we will set a main gridline every 16px (this will cause our artboards to be divided in 4×4 parts) with two subdivision:

    Illustrator的网格从全局标尺原点开始放置在工作区上。 您可以选择“首选项” →“ 参考线和网格 来设置其属性。 由于我们希望将64x64px的画布每侧分成8个部分,因此我们将每16px设置一条主网格线(这将使画板分成4×4的部分),并分为两个细分部分:

    Guides & Grid preferences panel

    Now we have to ensure that our grid matches exactly our artboard. By default, the first artboard is placed at global ruler origin, but, since artboards can be moved and reset: to do this simply double-click the ruler origin with the artboard tool.

    现在,我们必须确保网格与画板完全匹配。 默认情况下,第一个画板位于全局标尺的原点,但是,由于可以移动和重置画板:只需使用画板工具双击标尺的原点即可。

    Our grid should now perfectly align with our artboards:

    现在,网格将与画板完美对齐:

    Workspace with grid

    第一个字形 (The first glyph)

    Let’s start our first glyph, a simple check-sign inside a circle:

    让我们开始第一个字形,一个圆圈内的简单检查符号

    Check sign

    To draw the circle, we have to select the Ellipse tool, click in a point inside the artboard and input the ellipse width and height:

    要绘制圆,我们必须选择“ 椭圆”工具 ,在画板内的一点上单击并输入椭圆的宽度和高度:

    Ellipse tool

    Next, we have to remove any fill and to set a black stroke of 8px size. At this point we can align the circle to the artboard (make sure the align to artboard option is selected):

    接下来,我们必须删除所有填充并设置8px大小的黑色笔触。 此时,我们可以将圆与画板对齐 (确保已选中“ 与画板对齐”选项):

    Align panel

    But the result isn’t quite what we expected: Illustrator aligned the path without computing the stroke width. Thankfully, this can be easily resolved, setting the Use Preview Bounds option in the Preference Panel. Now Illustrator will compute stroke widths inside the artboard regardless of aligning and resizing, and this makes drawing quicker and more accurate.

    但是结果并不完全符合我们的预期:Illustrator在不计算笔划宽度的情况下对齐了路径 。 幸运的是,可以通过在“首选项面板”中设置“ 使用预览边界”选项来轻松解决此问题。 现在,Illustrator将计算画板内部的笔触宽度,而无需进行对齐和调整大小,这将使绘图更快,更准确。

    Preview Bounds example

    完成字形图 (Completing the glyphs drawing)

    We now have to draw each glyph, adding a fresh artboard each time. You can add an Artboard using the Artboard tool and option/alt dragging an existing one or clicking the New Artboard icon in the Artboards Panel.

    现在,我们必须绘制每个字形,每次都添加一个新的画板。 您可以使用Artboard工具添加Artboard,然后选择/ alt拖动现有的Artboard或单击Artboards Panel中New Artboard图标。

    Artboards can then be easily rearranged by choosing ObjectArtboardsRearrange (or the Rearrange Artboards command in the Artboards Panel menu) following the order in the Artboards Panel.

    然后,按照“画板”面板中的顺序,选择“ 对象” →“ 画板” →“ 重新排列” (或“画板面板”菜单中的“ 重新排列画板”命令)即可轻松地重新排列画板

    Rearrange artboards panel

    Note that glyphs are always uploaded in alphabetical order, so keep this in mind if you want the artboard order in Illustrator to match the glyphs order in the font.

    请注意,字形始终按字母顺序上载,因此,如果您希望Illustrator中的画板顺序与字体中的字形顺序匹配,请记住这一点。

    Give to each Artboard a name (no spaces): this will become the name of the glyph and also the class names of the generated CSS, so it’s very important to use meaningful words for them.

    给每个Artboard命名(不带空格):这将成为字形的名称,也将成为生成CSS的类名,因此对它们使用有意义的单词非常重要。

    The completed icons file

    Although we often use strokes to draw our symbols, font creation has some special needs. We have to remember that:

    尽管我们经常使用笔触来绘制符号,但是字体创建仍有一些特殊需求。 我们必须记住:

    • Each stroke must be converted to fills

      每个笔划都必须转换为填充
    • Fills must be combined creating compound paths if necessary (no overlapping shapes)

      填充必须合并,必要时创建复合路径(无重叠形状)
    • Any color will be ignored: glyphs will always be interpreted as black. You also can’t use white for backgrounds: you can have only transparent ones

      任何颜色都将被忽略:字形将始终被解释为黑色。 您也不能使用白色作为背景:只能使用透明的背景
    • Any embedded image in your SVG will be ignored

      SVG中的任何嵌入式图像都将被忽略

    You can use the Expand command to convert paths to filled shapes, and the Pathfinder panel to quickly combine overlapping shapes into single elements.

    您可以使用Expand命令将路径转换为填充的形状,并使用Pathfinder面板将重叠的形状快速组合为单个元素。

    Strokes to paths process

    Once our glyphs are ready, we can save each one as a distinct SVG file by using the Use Artboards option in the Save as dialog.

    字形准备好后,我们可以使用另存为”对话框中的“ 使用画板”选项将每个字形另存为不同的SVG文件。

    Exported SVG files

    Illustrator saves SVG files by prefixing their names with the .ai document name (icons_). Since IcoMoon uses files names for glyphs, I prefer to remove this prefix (there are a lot of small applications to easily rename all files) to reduce any confusion.

    Illustrator通过使用.ai文档名称( icons_ )前缀来保存SVG文件。 由于IcoMoon使用字形的文件名,因此我更喜欢删除此前缀(有很多小型应用程序可以轻松地重命名所有文件),以减少混乱。

    将文件上传到IcoMoon (Uploading files to IcoMoon)

    The IcoMoon site provides an online app to build icon fonts. The app starts with an Untitled project with access to some free icon libraries from which you can choose symbols.

    IcoMoon网站提供了一个在线应用程序来构建图标字体。 该应用程序从一个无标题项目开始,该项目可以访问一些免费的图标库,您可以从中选择符号。

    Since we will upload our own glyphs, we can remove all preloaded libraries using the small menu at the right of each of them (note that this is not mandatory, since only selected symbols will be added to your font). It just keeps your project clean.

    由于我们将上传自己的字形,因此可以使用每个字形右侧的小菜单删除所有预加载的库(请注意,这不是强制性的,因为只会将选定的符号添加到您的字体中)。 它只是保持您的项目清洁。

    You can then save your project clicking the Manage projects icon on the right of the app menu bar. Note that with IcoMoon free accounts, your project will be stored locally in your browser, so, you won’t be able to access it elsewhere until you download the project data (a JSON file) or upgrade to Premium account (that allows you to store projects in the cloud).

    然后,您可以单击应用程序菜单栏右侧的“ 管理项目”图标来保存您的项目。 请注意,使用IcoMoon免费帐户,您的项目将存储在本地浏览器中,因此,在下载项目数据(JSON文件)或升级到高级帐户(允许您执行以下操作)之前,您将无法在其他位置访问该项目将项目存储在云中)。

    Icomoon app

    Now, you can upload your SVG files using the Import icons button: your glyphs will appear in the app as a Set. It’s easy to rearrange, delete them or edit each glyph using the tools provided by the app at this stage. You can also edit the set metadata (the name of the set and some author info) or perform other tasks using the small menu at the right of the set.

    现在,您可以使用导入图标按钮上传SVG文件:您的字形将作为Set出现在应用程序中。 在此阶段,使用应用程序提供的工具很容易重新排列,删除它们或编辑每个字形。 您还可以使用集右侧的小菜单编辑集元数据(集名称和一些作者信息)或执行其他任务。

    Icons can be edited in the app using the edit tool. You can’t alter vector data in this way, but it is possible to resize or move the glyph, download the SVG file or replace it.

    可以使用编辑工具在应用程序中编辑图标。 您不能以这种方式更改矢量数据,但是可以调整字形的大小或移动它,下载SVG文件或替换它。

    The edit symbol panel

    To build your font, you’ll first need to select all required icons using the select tool (or just Select All/None command in the Set menu if that suits). You’ll be able to identify selected glyphs by their yellow borders. Then you must click the Font button at the bottom of the page.

    要构建字体,您首先需要使用选择工具选择所有必需的图标(或在合适的情况下仅在“ 设置”菜单中选择“全选/无”命令)。 您将能够通过黄色边框识别选定的字形。 然后,您必须单击页面底部的字体按钮。

    IcoMoon app with all glyphs selected

    The app will load a secondary window with all selected symbols, displaying for each of them the glyph, the name, and the Unicode point that IcoMoon assigned to it in the PUA range. The use of the PUA range is considered the safest unicode sector to host your icons, although IcoMoon lets you use the standard Basic Latin range, if you like, by clicking the Codes button in the top bar.

    该应用程序将加载一个包含所有选定符号的辅助窗口,并为每个符号显示IcoMoon在PUA范围内为其分配的字形,名称和Unicode点 。 尽管IcoMoon允许您通过单击顶部栏中的“ 代码”按钮来使用标准的基本拉丁语范围,但使用PUA范围被认为是承载图标的最安全的unicode扇区。

    You can also assign different range codes to each character by manually inserting a new code or a character:

    您还可以通过手动插入新代码或字符来为每个字符分配不同的范围代码:

    The glyphs list

    Before downloading your font, add a font name (this will be used in the @font-face rule), and Class Prefix and/or Postfix (that will be used as selectors in the generated CSS).

    在下载字体之前,添加字体名称 (将在@font-face规则中使用), 类前缀和/或后缀 (将在生成CSS中用作选择器)。

    There are many other parameters you can set: from Metadata info to Metrics values, I recommend to read carefully the short and well explained documentation to set properly all of them.

    您还可以设置许多其他参数:从Metadata infoMetrics值 ,我建议您仔细阅读简短说明的文档以正确设置所有这些参数。

    The font preferences panel

    Your icon set is done! Download your font (or, if you have a premium account, simply link to the CSS) and add it to your project.

    您的图标集已完成! 下载字体(或者,如果您有高级帐户,只需链接到CSS)并将其添加到您的项目中。

    The downloaded .zip file contains the font in various formats, a demo file you can use as a reference, a .json file that can be re-uploaded to restore your project (to view it into another computer, for example), and, of course, a .css file encoding your icons.

    下载的.zip文件包含各种格式的字体,可以用作参考的演示文件,可以重新上传以恢复您的项目(例如,将其查看到另一台计算机上)的.json文件,以及当然,是一个.css文件编码您的图标。

    The font folder

    The CSS (you can see an example below) contains the @font-face rule and all your symbols selectors.

    CSS(您可以在下面看到一个示例)包含@font-face规则和所有符号选择器。

    @font-face {
        font-family: 'icomoon';
        src:url('fonts/icomoon.eot?-88cxph');
        src:url('fonts/icomoon.eot?#iefix-88cxph') format('embedded-opentype'),
            url('fonts/icomoon.woff?-88cxph') format('woff'),
            url('fonts/icomoon.ttf?-88cxph') format('truetype'),
            url('fonts/icomoon.svg?-88cxph#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    [class^="myicon-"], [class*=" myicon-"] {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
    
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .myicon-alert:before {
        content: "\e600";
    }
    .myicon-arrow-down:before {
        content: "\61";
    }
    
    /* etc */

    试试吧! (Have a go!)

    I’ve found this is a very quick way to build an icons font, but it certainly takes time to find the perfect workflow, and to test all options that both Illustrator and IcoMoon can offer.

    我发现这是一种构建图标字体的非常快速的方法,但是找到完美的工作流程并测试Illustrator和IcoMoon都可以提供的所有选项当然需要花费时间。

    Have fun

    玩得开心

    翻译自: https://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/

    展开全文
  • icomoon.zip

    2020-07-26 17:59:05
    在网页开发中可以快速应用图标,可以直接解压,然后在里面有一个fonts的文件,直接复制到你的html项目中,在网页打开demo可以查看图标
  • icoMoon limited master

    2014-08-06 21:22:25
    IcoMoon is striving to build and provide the best iconography and icon management tool for perfectionists. IcoMoon's icon library features only the very best icon sets out there. All of our icons are ...
  • 通俗的做法 第一步:在样式里面声明字体: 告诉别人我们自己定义的字体 @font-face { font-family: ‘icomoon’; src: url(‘fonts/icomoon.eot?7kkyc2’); src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format...

    字体图标
    一般字体安装在c盘->windows->fonts
    一、优点:
    1.随意更改字体颜色,大小,缩放等
    2.体积小
    3.不增加请求
    4.和图片效果一样
    5.几乎支持所有浏览器,兼容性好
    6.移动端基本使用
    二、推荐字体图标库
    1.icomoon字库
    http://www.icomoon.io/
    2.阿里icon font字库
    http://www.iconfont,cn/
    fontello
    http://fontello.com/
    Font-Awesome
    http://fortawesome.github.io/Font-Awesome/

    三、使用字体图标
    1.选择字体图标
    2.下载
    3.引入到页面
    icomoon字库 为例子
    1.打开网站 选则下载字体图标
    2.下载后解压字体,解压的字体提出fonts文件,放入项目文件夹
    3.在页面引入字体
    首先把 以下4个文件放入到 fonts文件夹里面。 通俗的做法

    第一步:在样式里面声明字体: 告诉别人我们自己定义的字体
    @font-face {
    font-family: ‘icomoon’;
    src: url(‘fonts/icomoon.eot?7kkyc2’);
    src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’),
    url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),
    url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’),
    url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }
    第二步:给盒子使用字体
    span {
    font-family: “icomoon”;
    }
    第三步:盒子里面添加结构
    span::before {
    content: “\e900”;
    }
    或者

    字体图标是一种特殊字体,并不是每台电脑都有,
    需要安装了字体图标的电脑才可以查看。
    字体图标下载下来以后,有个fonts文件,放入到
    我们的网站,别人访问我们的网站自动调用字体图标,不需要每台电脑下载字体图标.

    四、上传生成字体图标
    1.需要svg格式的图标
    2.导入生成
    五、追加字体图标
    重新上传,重新追加字体
    如果工作中,原来的字体图标不够用,需添加新的字体图标,但是原来的
    不能删除,继续使用,此时需要把压缩包里面的selection.json重新上传,
    然后,选中自己想要的新的图标,重新下载压缩包,替换原来文件即可。

    展开全文
  • icomoon字体图标的下载与使用

    icomoon是外网一个免费的字体图标网站,我们在做网站页面时有的小图标不好截取,这是就可以在icomoon上很方便的选取我们需要的图标下载下来进行引用

    使用方法:

    先进入icomoon网站中:Icon Font & SVG Icon Sets ❍ IcoMoonIcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.https://icomoon.io/

     

     然后点击右上角IcoMoon App进入主页面

         这时会出现很多小图标,选择我们需要的图标,Selection中会显示我们选择的图标个数,点击Generate Font生成字体图标

    当这个页面中没有我们需要的图标时,我们可以点击左下角Add Icons From Library 去选择更多的需要的图标

    此时我们选择的图标就会显示出来,点击Download下载图标,会生成一个压缩包 ,解压之后会有以下文件夹

     * 将其中的fonts文件夹放到项目的根目录中,使用时打开demo.html选择需要的字体对后边的小方框进行复制粘贴即可,在引入字体图标时需要在CSS插入一段代码:

    注意:当字体图标显示不出来时,可能是url后边的路径不对,根据自己存放路径进行更改

    @font-face {
            font-family: "icomoon";
            src: url('fonts/icomoon.eot?7kkyc2');
            src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
                url('fonts/icomoon.woff?7kkyc2') format('woff'),
                url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
            font-style: normal;
            font-weight: normal;
            font-display: block;
        }

    在html引入字体时:

    <span></span>

    css需要添加字体样式:

    span {
            font-family: 'icomoon';
        }

    展开全文
  • 应用实例icomoon生成字体图标

    热门讨论 2016-02-17 15:25:37
    使用icomoon在线生成字体图标工具制作demo https://icomoon.io/app/#/select
  • icomoon字体图标的引入

    2022-01-28 16:24:14
    1.在网站(http://icomoon.io)中下好字体样式之后,将其中的fonts文件夹移动到要使用页面的根目录中。 2.将字体声明写入样式中 3.打开在事先下载文件中的demo.html,复制字体后面的小方格到盒子中。 4.盒子的...
  • 用于IcoMoon字体的钛合金库 设置 使用位于的IcoMoon App创建/编辑字体 下载您的字体包(不要忘记更改字体版本) 将您的<font> .zip文件复制到项目根目录或在Alloy Config变量icomoonlib.zipDir中配置自定义文件夹 ...
  • 字体图标icomoon的用法

    2021-10-12 08:55:13
    一、字体图标的产生 有很多优点: 字体图标比图像要小,一旦加载字体,图标会立马渲染出来,减少了服务器请求 ...http://www.icomoon.io http://www.iconfont.cn/ 下载完成后,得到一个..
  • IcoMoon

    2017-04-13 16:41:21
    IcoMoon!一个可以通过个性化设置来创建自定义图标(字体)的生成器!也可以将SVG图片,转换成web字体 IcoMoon是一项免费的服务,通过使用不同设置使我们能够创建自定义的ICON图或ICON字体。 当然了,网站也有...
  • 这篇文章主要是针对icomoon字体图标的使用方式进行比较全面的讲解。 文章目录前言为什么要使用字体图标总结一下使用字体图标的优势获取字体图标的网站 为什么要使用字体图标 因为图片不能很好地进行缩放,当图片...
  • font-family: ‘icomoon’; src: url(‘fonts/icomoon.eot?7kkyc2’); src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’), url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’), ...
  • 此篇博文讲述如何利用icomoon导入图标,从而把自己想要图标通过icomoon方式进行生成。大家都知道,网站以及移动端,用图标还是尽量选择这种。1、直接用image有些图标会失真;2、图标统一管理,方便引用;3、前端开发...
  • icomoon 及阿里字体图标库使用,进入官网选择喜欢的图标字体,进行一些预设,下载本地或者在线使用即可。
  • 字体图标库-icomoon的使用方法(笔记) icomoon官网地址:https://icomoon.io/ 如何将自己的svg,jpg等图片生成为字体图标。 如何在icomoon下载字体图标并且引用。 如何追加字体图标。 如何将icomoon上面的字体...
  • icomoon使用详细介绍

    万次阅读 2019-06-18 11:12:51
    此篇博文讲述如何利用icomoon导入图标,从而把自己想要的都通过icomoon方式进行,大家都知道,网站以及移动端,用图标还是尽量选择这种。因为直接用image有些图标会失真,从而也是前端开发之中,需求去掌握的一项,...
  • 进入icomoom首页后,找到IcoMoon App 然后选择你要下载的图片,选择Generate Font 然后右下角就成为Font Download,点击Download 这时下载好了,我们解压 icomoon的引入 解压后会有style.css的样式,我们复制

空空如也

空空如也

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

icomoon

友情链接: 渡河问题.rar