css之字體圖標

SVG與字體圖標

SVG圖片是矢量圖片,不會隨著圖片的伸縮而影響質量,通常把只有一種顏色的圖標做成SVG,通過SVG生成字體圖標,放到項目中使用。

https://icomoon.io/是一個比較快捷的生成字體圖標的線上工具,進入主頁后,點擊右上角IconMoon App按鈕,進入圖標制作頁面。
這里寫圖片描述

頁面上有很多官方提供的默認圖標。點擊左上角“Import Icons”可以導入自己的svg。
這里寫圖片描述

再點擊右下角Generate,然后download就可以了。下載之后,有詳細的使用demo,非常方便。
這里寫圖片描述

fonts目錄下是字體文件,引入到項目中,并引入style.css。按照demo.html的示例來用就可以了。
這里寫圖片描述

之前也用過其他字體圖標生成工具比如http://iconfont.cn,但感覺不如https://icomoon.io/快捷。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247629.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247629.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247629.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

history.back(-1)和history.go(-1)的區別

history.back(-1):直接返回當前頁的上一頁,數據全部消息,是個新頁面 history.go(-1):也是返回當前頁的上一頁,不過表單里的數據全部還在 history.back(0) 刷新 history.back(1) 前進 history.back(-1) 后退

研發階段模擬接口數據

因為在vue-cli工程中需要創建很多.vue文件,我們希望創建vue文件和創建html、css、js文件一樣右鍵即可選擇創建,并且創建的文件中可預先寫好模板代碼。 webstorm-Preferences打開選項界面 選擇File and Code Templates,點擊綠色加號 填…

真實項目中 ThreadLocal 的妙用

一、什么是 ThreadLocal ThreadLocal 提供了線程的局部變量,每個線程都可以通過 set() 和 get() 來對這個局部變量進行操作,但不會和其他線程的局部變量沖突,實現了線程間的據隔離。 簡單講:一個獲取用戶的請求線程 A,…

css之flex布局

flex布局是css3中的重要布局方式,稱為“彈性布局”,每次想到它主要是遇到元素垂直居中、元素寬高自適應的問題,這些問題在flex中都能過簡單設置就解決,它更像是原生APP中的布局操作,布局不必寫N多的盒模型代碼來實現&a…

javascript對URL中的參數進行簡單加密處理

javascript的api本來就支持Base64,因此我們可以很方便的來進行編碼和解碼。 var encodeData window.btoa("namexiaoming&age10")//編碼 var decodeData window.atob(encodeData)//解碼。 下面來個具體的例子來說明如何對url中參數進行轉碼&#xff…

Fibinary Numbers

http://acm.hust.edu.cn/vjudge/contest/view.action?cid30506#problem/V 題意:從右向左,每一個位數,分別表示一個fibonacci數,1表示有,0表示沒有;求兩個數的和,同樣按照這種形式存儲 #include…

移動web開發DRP問題

DPR dpr問題是移動端web開發上需要注意的問題,用大白話說就是,代碼中所設置的像素值實際上是虛擬像素,手機屏幕上的像素實際為物理像素,原始的手機,虛擬像素與物理像素是1:1覆蓋的,但隨著移動端屏幕的技術發…

HTML元素title里面如何換行

在調試代碼的時候我就遇到一個問題,HTML元素title里面通常只顯示一行,那我想要他換行,就是多行顯示,如何實現?JS代碼里面比如Alert里面又該如何換行? 經過我的一番實驗 要實現這種效果有幾種方法&#xff0…

A20 GPIO中斷類型差別結果迥異的問題思考

A20GPIO中斷類型差別結果迥異的問題思考 最近在使用全志A20做開發時,發現在處理中斷的時候,用電平觸發模式,報中斷比較亂,用邊沿觸發則很穩定,不會亂報。筆者感到比較困惑,筆者用電平觸發寫的code如下&…

div內圖片和文字水平垂直居中

大小不固定的圖片、多行文字的水平垂直居中 本文綜述 想必寫css的都知道如何讓單行文字在高度固定的容器內垂直居中,但是您知道或者想過讓行數不固定的文字在高度固定的容器內垂直居中呢?本文將會告訴你如何實現多行文字的垂直居中顯示。 關于圖片垂直居…

sticky-footer實現記錄

sticky-footer是css中的一個經典問題: 當頁面內容超出屏幕,頁腳模塊會像正常頁面一樣,被推到內容下方,需要拖動滾動條才能看到。 而當頁面內容小于屏幕高度,頁腳模塊會固定在屏幕底部,就像是底邊距為零的…

敏友的【敏捷個人】有感(3): 有感于“敏捷個人”討論與練習

2010年我對個人管理進行了自己的一些思考,在2011年提出敏捷個人概念,并且在線上、線下進行了多次交流,在一些大會上也做過分享。現在,已經有很 多IT和非IT的敏友們知道并在踐行敏捷個人,幫助自己更快的成長。我收到大家…

jQuery編寫插件

引言: 在項目中不同頁面經常要用到已經寫好的交互,比如彈窗,比如下拉菜單,比如選項卡,比如刪除... 此時如果每次都把代碼copy一份無疑是一件比較麻煩并且無趣的事情,而且個人認為有些low了,我們…

webstorm中nodejs代碼提示

preferences->languages&frameworks->Node.js and Npm中選擇一個本地的node版本 preferences->languages&frameworks->JavaScript->Libraries 勾選node.js Core 回到代碼

9012教你如何使用gulp4開發項目腳手架

本文將會介紹如何使用gulp4來搭建項目腳手架,如果您還在使用gulp3或更老的版本,您也以通過本文的一些思想將之前的項目進行完善,更新。如果gulp不是你們團隊的重點,也可以移步我的另一篇文章:用 webpack 4.0 擼單頁/多頁腳手架 (j…

nodejs模塊

nodejs模塊遵循commonJS規范,但并不是完全實現規范,主要使用require引入模塊、使用exports導出模塊。 導出屬性或方法 使用exports mouduleA.js: var say function(world){console.info("say: "world); }var sing function(wo…

Array.prototype.slice.call(arguments)

Array.prototype.slice.call(arguments)能將具有length屬性的對象轉成數組,除了IE下的節點集合(因為ie下的dom對象是以com對象的形式實現的,js對象與com對象不能進行轉換)如:1 var a{length:2,0:first,1:second}; 2 Ar…

動態內存分配導致內存泄漏之處

摘要:舉了幾個動態內存分配過程中,發生內存泄漏的例子 1. 分配了內存,卻沒有及時刪除,導致泄漏 1: void doSomething() 2: { 3: int *pnValue new int; 4: } 2. 為指針變量分配了一個內存,然后又讓指針變量指向其他的值,導致…

nodejs常用模塊-url

URL nodejs中針對url的常用方法。 node下打印url,結果: 引入url模塊 var url require(url) 1、parse方法 將url解析成對象,parse方法原型: url.parse(urlStr[, parseQueryString][, slashesDenoteHost]) 可傳遞三個參數…

常用的javascript設計模式

請堅持 什么是設計模式 百度百科: 設計模式(Design pattern)是一套被反復使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結。 使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。 毫無疑問,設計模式…