demo_fontclass.html

最新推荐文章于 2022-10-08 20:07:45 发布
最新推荐文章于 2022-10-08 20:07:45 发布
阅读量321 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mikibiubiu/article/details/104460287
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-shuaxin"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-shuaxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shujuku"></i>
                    <div class="name">数据库</div>
                    <div class="fontclass">.icon-shujuku</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenzhang"></i>
                    <div class="name">文章</div>
                    <div class="fontclass">.icon-wenzhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianjie"></i>
                    <div class="name">链接</div>
                    <div class="fontclass">.icon-lianjie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caidan"></i>
                    <div class="name">菜单</div>
                    <div class="fontclass">.icon-caidan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youjian"></i>
                    <div class="name">邮件</div>
                    <div class="fontclass">.icon-youjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuijian"></i>
                    <div class="name">推荐</div>
                    <div class="fontclass">.icon-tuijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msg"></i>
                    <div class="name">评论 </div>
                    <div class="fontclass">.icon-msg</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-userpro"></i>
                    <div class="name">头像</div>
                    <div class="fontclass">.icon-userpro</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leimulianjie"></i>
                    <div class="name">类目链接</div>
                    <div class="fontclass">.icon-leimulianjie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list"></i>
                    <div class="name">名单</div>
                    <div class="fontclass">.icon-list</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-remind"></i>
                    <div class="name">提醒</div>
                    <div class="fontclass">.icon-remind</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Password"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-Password</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Setup"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-Setup</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangsheng"></i>
                    <div class="name">上升</div>
                    <div class="fontclass">.icon-shangsheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fajianxiang"></i>
                    <div class="name">发件箱</div>
                    <div class="fontclass">.icon-fajianxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiajiang"></i>
                    <div class="name">上升</div>
                    <div class="fontclass">.icon-xiajiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paixu"></i>
                    <div class="name">排序</div>
                    <div class="fontclass">.icon-paixu</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
mikibiubiu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS-demo.rar_DEMO_css
09-14
例如，`p`选择器用于选取所有段落，`.class`选择器用于选取具有特定类名的元素，`#id`选择器用于选取具有特定ID的元素。 3. **属性和值**： 在CSS中，每条规则包含一个或多个声明。声明由属性（如`color`或`font-...
关于阿里图标库Iconfont生成图标的三种使用方式（fontclass/unicode/symbol）
ake520520的博客
04-12 3472
1.附阿里图标库链接：http://www.iconfont.cn/ 2.登录阿里图标库以后，搜索我们需要的图标，将其加入购物车，如图3.将我们需要的图标全部挑选完毕以后，点击购物车图标4.这时候右侧会出现一个预览窗口，显示我们前面加入购物车的那些图标，我们选择页面中的下载代码 5.查看一下我们的下载包里面都有什么文件 6.使用fontclass方式其实在下载的文件...
html字体库的是引入----阿里妈妈
m0_47531829的博客
04-16 887
icomoon字库：http://icomoon.io 阿里妈妈字体库:http://www.iconfont.cn/ 阿里上面字体库的安装，因为看网友说不能改字体所以自己尝试了一下，是可以改字体的，但是官方给出了3种安装方法，但是本人比较愚钝，只搞明白其中一种方法。在此记录一下，个人感觉阿里字体安装的比较麻烦，不如icomoon安装省事，但是阿里是免费的，恩，对的，白嫖真香，icommon也确实不错，但是毕竟是外网，加载速度太慢了。 首先，进入网站。当然需要登入的，没有账号的去注册一个就行。 登入之后先
html自定义字体demo,21.8.自定义字体
weixin_42509518的博客
07-03 215
## 21.8.1.引入外部(独立)字体一般的网页中，通常使用浏览器内部具有的字体——浏览器也通常从操作系统获取可用字体。但：我们也可以给浏览器提供额外的字体(就类似提供图片一样)，然后我们在网页中就可以引入并使用该字体！。注：网上有很多字体，有些免费，有些收费。具体做法：```@font-face{font-family: “自己给某字体取的名字XXFont”;src : url(./某字体文...
iconfont的查寻和使用
西风XF的博客
04-10 8492
1、在你需要使用到iconfont的时候，是先找图标库，一般使用的图标库是---阿里巴巴矢量图标库。网址：http://www.iconfont.cn/； 2、进入网址后，点击图标库，可以分类查找也可以直接搜索你想要的图标（例如：搜索‘支付宝’），把该图标加入购物车； 3、点击“购物车---下载代码---需要登录（GitHub登录，微博登录，或者阿里内部员工登录）”； 4、下载到本地的是一个...
阿里图标（iconfont）怎么获取类名？
u012746918的博客
02-28 1840
把你要的图标添加购物车，然后点下载代码，会得到一个压缩包，解压后打开demo_fontclass.html文件，就能看到类名。在项目里作为全局引用就可以使用了。 ...
javascript实现在某个元素上阻挡鼠标右键大事的方法和实例__1.docx
10-09
在某个元素上阻挡鼠标右键默认事件DEMO body {font-size:12px;line-height:24px;font-family:Arial,Helvetica,sans-serif;} #activeArea {width:300px;height:200px;background:#06C;color:#fff;} #cstCM {...
html+jq 前端小白电商网站demo
01-30
可能的样式规则包括选择器（如`.class`、`#id`、`element`）、属性（如`color`、`font-size`、`background-image`）以及值，通过这些规则实现页面的美化和响应式设计。 `js`目录则包含JavaScript代码，这里的JQ是一...
html_demo页面效果
07-28
例如，我们可以使用`.class`或`#id`选择器来定位HTML元素，然后设置`color`、`font-size`、`background-color`等属性。在"html_demo"中，CSS可能已经创建了各种样式规则，使得页面看起来更加专业和吸引人。此外，CSS...
html5_canvas_demo
01-28
通过JavaScript的`document.createElement('canvas')`可以创建一个新的canvas元素，并使用`id`属性或`class`属性来标识和选择。 2. **绘图上下文获取**：通过调用`canvas.getContext('2d')`获取到二维绘图上下文...
Web端如何引用iconfont，iconfont所有的引用方式。
热门推荐
RunCoder
04-05 2万+
一、如何下载iconfont图标。 在iconfont-阿里巴巴矢量图标库中有多种图标供你选择。比如我们选择其中的一个作为示例。                                                             鼠标悬浮上后会出现三种选择：     1.添加入库：功能和淘宝中的购物车一样，可以添加多个图标进行操作。.     2.收藏：       ...
阿里图标库使用font class 写法和unicode引用，简单，使用快捷
Bad_Shepherd的博客
02-12 3329
主要介绍 font class 写法，这种写法使用简单 直接开始吧 使用步骤 1.打开阿里图标库的官网：https://www.iconfont.cn/ 2.直接搜索想找的图标，比如购物车 有时会弹出一些教程，点了就行，会出来这么多图标。 3.选择好图标，然后加入购物车，这里要注意的是，如果做实际的项目时，肯定会用到多个图标，这时候，需要一次性加入。不然会导致一些问题。 加入完成之后可...
vue实战之电商管理——font-class的制作与使用
weixin_39828926的博客
06-16 448
font-class的作用 在制作网页时，会使用到很多的图标，如登陆的用户图标以及密码图标，还有很多其他的使用，而这些素材是怎么引入到项目中的？除了魔术图之外，我有接触到了另一种技术——font-class实现图标资源导入使用。 font-class的制作 1.进入阿里图标库； 2.搜索想要的图标后添加图库，点击这个图标 3.选择好图片之后，进入库，点击如下图标 4.将库中的图片导入到项目中，如下： 5.之后就是下载操作： 6.下载后解压到当前文件，并把该文件复制到项目对应的目录中，制作完成。 fo
字体图标的三种引用方法（二）
今天很喜欢小水
01-26 3499
Font class引用 字体图标的引用准备工作：首先搜索iconfont（字体图标矢量库）在其中找到自己需要用到的图标添加到购物车，然后添加到项目中，点击下载至本地并解压缩。 font-class 引用介绍 font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。 与 Unicode 使用方式相比，具有如下特点： 兼容性良好，支持 IE8+，及所有现代浏览器。 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么
矢量库推荐与使用
m0_63544378的博客
06-29 531
在我们写代码的时候我们常常需要用到矢量图标，今天小编给大家推荐一个好用的矢量图库就是我今天说的阿里巴巴矢量库，他的里面有许多的矢量图标。
阿里矢量图标
hewoqukanhai的博客
10-08 254
阿里矢量图标
HTML中使用IconFont图标
大头皮鞋的博客
08-11 7937
本博文介绍如何获得IconFont图标，以及在html中使用IconFont的3种方式。 一、获得IconFont图标 进入IconFont官网：https://www.iconfont.cn/，点击右上方人像图标登录。 选择一种快捷登录方式，这里选择Github 搜索需要的图标，例如：点赞 键入“点赞”后，回车搜索图标 鼠标移动到一个喜欢的图标上，点击购物车图标 ...
阿里icon使用fontclass
爪哇犀牛
05-10 3653
1.百度阿里专业icon也可以直接点击，进入 2.搜索自己需要的icon加入购物车   3.然后将icon添加至以创建的项目方便后续更细（添加前需要登陆github或者微博） 4.选择好之后会跳转至该页面，下载至本地即可 5.下载后可以看到下图文件，复制图中所示的5个文件到新建的font文件夹下 6.其实这个解压后的文件非常全，可以模仿他的写法去写自己要的模式，这里用f...
阿里图标fontclass引用
qwe19991123的博客
05-07 1888
import url(’’) 或者 link
移动端html demo
最新发布
06-10
好的，下面是一个简单的移动端 HTML Demo： ```html <!DOCTYPE html> <html lang="en"> , initial-scale=1.0"> <title>Mobile HTML Demo * { margin: 0; padding: 0; box-sizing: border-box; } body ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值