字体图标的使用

字体图标的使用

技术背景

很多情况下，我们都希望我们的图标可以缩放，而图片的放大和缩小都会失真，字体图标在这里被运用

字体图标的特点

可以做出跟图片一样可以做的事情,改变透明度、旋转度，等.. 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等... 本身体积更小，但携带的信息并没有削减。 几乎支持所有的浏览器 移动端设备把字体图标大小的随意缩放特点运用的淋漓尽致...

网站使用流程

推荐个网站：http://icomoon.io 国外的，访问有点慢，但是做字体图标他们是专业的

然后也是相同位置，点击下载，会下载一个压缩包到我们的本地，解压开来，准备融入项目

字体图标使用流程

一 、打开demo.html,复制字体图标数据到页面中

 

 

当然你可以多复制几个，全部复制到页面中也行

二、也样式中声明字体，并给目标指定字体

<!--在在样式中，申明字体 -->
@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;
}
​
<!-- 选择该字体 并为其给定大小和颜色-->
div {
  font-family: "icomoon";
  font-size: 50px;
  color: red;
}
<!-- 这就是那我们那复制而来的图标信息，有些ide会显示为空 -->
<body>
  <div>  </div>
  <div>  </div>
  <div>  </div>
  <div>  </div>
</body>

三、在网页中打开即可

字体图标可以想字体那样控制岁月控制，它不再想图片那样单调

 

posted @ 2020-02-19 18:00  阿陈不是混子  阅读(185)  评论(0)  编辑  收藏  举报
!function(e){var t={};function a(n){if(t[n])return t[n].exports;var s=t[n]={i:n,l:!1,exports:{}};return e[n].call(s.exports,s,s.exports,a),s.l=!0,s.exports}a.m=e,a.c=t,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)a.d(n,s,function(t){return e[t]}.bind(null,s));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=14)}([function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){"use strict";a.r(t);a(0);var n={version:"3.0.0",avatar:null,favicon:null,customNavs:[],catalog:{enable:!1,move:!0,index:!0,level1:"h2",level2:"h3",level3:"h4"},signature:{enable:!0,author:null,license:"署名-非商业性使用-相同方式共享 4.0 国际",link:"https://creativecommons.org/licenses/by-nc-sa/4.0/",remark:null},sponsor:{enable:!0,text:"Buy me a cup of coffee ☕.",paypal:null,wechat:null,alipay:null},github:{enable:!1,color:"#fff",target:"_blank",fill:null,link:null}};function s(){return $("#topics").length>0}a(1);var l=function(){var e=n.github;if(e.enable){let t=e.fill?`fill:${e.fill};`:"";$("body").append(`\n \n `)}};a(2);var i=function(){const e=n.customNavs,t=$("#navList");e&&e.length&&(e.forEach(e=>{if(e.chilren&&e.chilren.length){var a=e.chilren.map((function(e){return`
  • ${e.title}
    • `}));t.find("li").eq(1).after(`\n
  • \n ${e.title}\n \n \n
      ${a.join("")}
    \n
    • `)}else t.find("li").eq(1).after(`
  • ${e.title}
    • `)}),$("li.esa-has-subnavs").hover((function(){$(this).find("svg").addClass("open"),$(this).find(".esa-sub-navs").fadeIn("fast")}),(function(){$(this).find("svg").removeClass("open"),$(this).find(".esa-sub-navs").hide()}))),$.each(t.children("li"),(e,t)=>{$(t).children("a").length?$(t).append(""):$(t).remove()}),$("#header").prepend('
    '),$(".esa-mobile-menu").on("click",()=>{$("#navigator").fadeToggle()})};a(3);var o=function(){$("#footer").append(`& Theme Silence v${n.version}`)};a(4);var c=function(){const e=n.avatar,t=n.favicon;e&&$("#sideBarMain").prepend(``),t&&$("#favicon").attr("href",t)};a(5);var r=function(){const e=n.catalog;if(e.enable){let t=[e.level1,e.level2,e.level3],a=$("#cnblogs_post_body").find(t.join(","));if(!a.length)return!1;$("body").append('
    ');let n=0,s=0,l=0,i="",$(".esa-contents").append(i)}};a(6);const d="https://unpkg.com/lightbox2@2.11.1/dist/css/lightbox.min.css",p="https://unpkg.com/lightbox2@2.11.1/dist/js/lightbox.min.js";var h=function(){$("head").append(``),$.getScript(p,()=>{$("#cnblogs_post_body").find("img").wrap((function(){return``})),$(".code_img_closed, .code_img_opened, .cnblogs_code_copy img").unwrap()})};a(7);var u=function(){let e=$(".postBody .cnblogs-markdown").find("pre code");if(!e.length)return!1;$.each(e,(e,t)=>{if(!$(t).hasClass("hljsln")){var a=$(t).html();a=function(e){var t=e.replace(/]*>|<\/span>/g,"");/\r|\n$/.test(t)&&(e+='');var a=1;return e=''+(e=''+(e=e.replace(/\r\n|\r|\n/g,(function(e){return e+''}))))}(a),$(t).html(a).addClass("hljsln");var n=$("span[data-num]:last");n.html()||n.remove()}})};a(8);var f=function(){const e=n.signature;if(e.enable){const t=$("#cb_post_title_url").attr("href"),a=`
    \n

    作者：${e.author||$("#profile_block a").eq(0).html()}

    \n

    出处：${t}

    \n

    版权：本文采用「${e.license}」知识共享许可协议进行许可。

    \n

    ${e.remark||""}

    \n
    `;$("#MySignature").html(a).show()}};a(9),a(10);function v(e){$("body").prepend(`
    ${e}
    `);let t=$(".esa-layer");t.slideDown(200),setTimeout(()=>{t.remove()},2e3)}var m=function(){const e=n.sponsor;$("#blog_post_info").prepend(`\n
    \n
    ${e.text}
    \n
      \n
      • \n
      • \n
      • \n
    \n
    \n \n
    \n
    `);var t=$(".esa-sponsor");t.find(".box li").hover((function(){const a=$(this).attr("class");if("paypal"==a&&!e.paypal)return v("没有设置 PayPal 收款二维码😅");if("alipay"==a&&!e.alipay)return v("没有设置支付宝收款二维码😅");if("wechat"==a&&!e.wechat)return v("没有设置微信收款二维码😅");var n=null;switch(a){case"paypal":n=e.paypal;break;case"alipay":n=e.alipay;break;case"wechat":n=e.wechat}t.find(".qrshow").html(``).show()}),(function(){t.find(".qrshow").hide()}))};a(11);var g=function(){const e=".feedbackItem > .feedbackCon > .blog_comment_body",t=()=>{$(e).before("
    ");let t=$(".feedbackItem > .feedbackCon");$.each(t,(function(e,t){let a=null,n=$(t).find('span[id$="avatar"]');n.length&&(a=$.trim($(n).text())),$(t).find(".esa-comment-avatar img").attr("src",a||"https://pic.cnblogs.com/face/sample_face.gif");const s=$(t).parent().find(".comment_date").next().attr("href");$(t).find(".esa-comment-avatar a").attr("href",$.trim(s))}))};if($(e).length)t();else{let a=1,n=setInterval(()=>{$(e).length&&(clearInterval(n),t()),10==a&&clearInterval(n),a++},500)}};a(12);var b=function(){$("body").append('
    \n
    \n \n \n \n
    \n
    \n
    主题色彩
    \n
    \n \n \n \n \n \n \n \n \n \n \n
    \n
    \n
    \n
    \n
    ');const e=s()&&n.catalog.enable;e&&$(".esa-toolbar").append('');const t="silence-mode-"+currentBlogApp,a="silence-theme-"+currentBlogApp,l=sessionStorage.getItem(t)||"light",i=sessionStorage.getItem(a)||"a1";$("html").attr("mode",l),$("html").attr("theme",i);const o=$(".esa-toolbar"),c=$(".skin-popup");let r=!1;o.find(".bars").click((function(){r?(o.find(".bars").removeClass("bars-show"),o.find(".up").removeClass("up-show"),o.find(".mode").removeClass("mode-show"),o.find(".skin").removeClass("skin-show"),e&&o.find(".contents").removeClass("contents-show")):(o.find(".bars").addClass("bars-show"),o.find(".up").addClass("up-show"),o.find(".mode").addClass("mode-show"),o.find(".skin").addClass("skin-show"),e&&o.find(".contents").addClass("contents-show")),r=!r})),o.find(".up").click(()=>{$("html, body").animate({scrollTop:0},450)}),o.find(".mode").click(()=>{const e="light"==$("html").attr("mode")?"dark":"light";sessionStorage.setItem(t,e),$("html").attr("mode",e)}),o.find(".skin").click(()=>{c.slideToggle()}),c.find(".themes button").click((function(){const e=$(this).data("theme");sessionStorage.setItem(a,e),$("html").attr("theme",e)})),o.find(".contents").click(()=>{$(".esa-contents").toggleClass((function(){return $(this).hasClass("active")?($(this).removeClass("active"),"noactive"):($(this).removeClass("noactive"),"active")}))})};a(13);const w={show:()=>{$(".esa-loader").show()},hide:()=>{$(".esa-loader").fadeOut()}};var y=w;new class{constructor(){this.init()}init(){$.extend({silence:e=>{e&&$.extend(!0,n,e),this.building()}})}building(){c(),l(),o(),i(),b(),s()?(r(),h(),u(),f(),m(),g()):($(".forFlow").css({marginLeft:"260px"}),$("#sideBar").show()),y.hide()}}}]);