First, the principle:
Fonts icon is used in Web projects icon fonts, using the rules of CSS3 @ font-face introduction of Sprite map file, by azimuth display an icon, the icon can be used directly glyphicons / font-awesome;
Official website: http://fontawesome.io/
Official website: https://glyphicons.com
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <i class="fa fa-home"></i>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <span class="glyphicon glyphicon-search"></span>
Custom font icon set: to set an example glyphicons Source
@ font- face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; -webkit-font-smoothing: antialiased; font-style: normal; font-weight: normal; line-height: 1; -moz-osx-font-smoothing: grayscale; }
* Note: .glyphicon class declaration 1px a relative position offset from the top, appears to inline-block, statements font, font-style, and predetermined font-weight is normal, set the row height to 1.
In addition, the use of -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale; for consistency across the browsers.
.glyphicon: empty { // Reserved width size empty
width: 1em;
}
the User-.glyphicon: the before { // user avatar icon font azimuth
Content: "\ E008" ;
}
Custom font icon
Default icon display
<button type="button" class="btn btn-primary btn-lg"> <span class="glyphicon glyphicon-user"></span> User </button>
Custom font size
By increasing or decreasing the font size of the icon, you can make the icon appear larger or smaller.
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px"> <span class="glyphicon glyphicon-user"></span> User </button>
Custom font color
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);"> <span class="glyphicon glyphicon-user"></span> User </button>
Apply text shadow
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-user"></span> User </button>
Online custom font icon
Click here to customize the font icon >>
Second, the development environments:
Here are the Font Awesome , it's icon library a total of 675 icons, icons query URL https://9iphp.com/fa-icons , behind a custom icon introduction IconFont .
the install font Awesome -S-NPM // incorporated Import 'font-Awesome / CSS / font-awesome.css' // 1. Global Use: main.js <i class="iconfont icon-xxx"></i> // 2.直接使用：html
Custom Fonts icon IconFont : three quoting mode, a variety of fonts and vector icon file references optional use
1. Unzip the file: visit the official website - the selection of icons to cart - Download Code
2. references a local file: In your own projects introduced directly copy the code css file, the longest Sprite is a direct reference to Figure base64 format
@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1577411459799'); /* IE9 */
src: url('iconfont.eot?t=1577411459799#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANQAAsAAAAAB1wAAAMDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCZIJDATYCJAMICwYABCAFhG0HMhtrBhHVm0/IfiZkcpdbFggd199ZS5IhdJp4Jnggva83SDY7s2D2jFQnI3tSx+QgdHQlVD/bHVxS3SIBAsg3N0PXqAjFkpwH/8sy0zXS/AqAg2OmS/E8oDllFCUOcDygAVXUC/+D/IPxD2MXtMTlEIChhoDo0WvACDw0ZjsBiHmzi6fiZWTohmSBh8CtGKoRu3Dw5GaZADuDnxdfaZYHEkdhpg0Je86gy8f5VpiKKqIJnoJ4Og3ARoECAqBBjKjUDUJFvoDCqD5NHWwrWcDH+RUVHm2z/3ggQLiYiRkAVIO0a6I7jEv9SwmABlxgFbB10K3ArZde1fj+8vCAydpy48wx5OGzW88LdfR8w0yi42dvWktUqFJVxGPic8Zgk5uNHLn/0KETp075owzRmS3nhIrPN7RPntU+/vSIDxizZR/Y0fJQua2KMATU0eawJ89OkdGxMzeMOXUuPm/t6TG/4PzWs53r9Pfr/fSHFAxO/hUo51aQ8ps7yZCkpPBfMriwpLmfCm45ywrDW37iNw+be33qhbW69Et7Om7xgH4NBjRvonRG+LtMfjCu34q2tftdXGW/mxbmux0YhoeaO6mmKWcIPdA4b7uMO8XMQgpOJhccGXIruO0Xd0kcMDIJEroAULFaaxX9j9/hh1AfJmd3+O9ZDcDrpuvWIkY3A3hnrRfw9rM0UFGqNWeacqkVHigkWYV7VxkGA1SATXneDxUV3mpI4FF4w4Y0qieg8KiH1NgAHCwtwMWjMxia6j3akm8JCqHTgSbWAxDkuAySLO6BIkcJUmPfgYPvO7jkpMAwSuRPaWkQZkR3wp3xguMP5kxR2koWYfIN1dvvlGYGuBdSNU4Y2j4fXDAiTdGjftTILEFSCjCD1dD7BJmSxZNbzZynrpNVD2rPFBpBd8Kd8YLjD+ZMUXqlWRS+/4bq7XdqKKiSv5CqqRyGtu+AXHixU8GtnFI/amSWICkFmIEGveVLkKsbWTy51QM8eepQMdmV1y4vCG+3DDCYYims+govNB5Xu1PTAAA=') format('woff2'),
url('iconfont.woff?t=1577411459799') format('woff'),
url('iconfont.ttf?t=1577411459799') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1577411459799#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-file_jar:before {
content: "\e76d";
}
3. Example:
<i class="iconfont icon-file_jar">jar图标</i>
4. superimposed or replaced with a new icon: If the icon is recommended before repackaging
@ font- face { font-family: "my-iconfont"; src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAxEAAsAAAAAFbAAAAv3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEaAqbXJVsATYCJAM4Cx4ABCAFhG0HgU4b2BEjETaMtKIl+4uDbMiUHH3Zlq/GkU4b2k7tiv4hGTbRFurIvORpMBL3OR6ouc+3ySb5lxyyKpBDdoAsFAAqQN/qKhrPuo5AWPoffpt/33vEI0UbJ7koO9mwkjAqUbcfLJIf7iioy8BV4yqNIlaJrtjPQGSDOW9C/a9O029ZCiyS7OSAaOrrshwRWKu8CoJU5xACBwDDdvduvnsJc8Iw5Xfd0we4rBdyZLYIJypk53/N1c0TFtoM81DwUGjlDDnj8Q8VSUtYo5EhlIkZ1qDxaFQIMRKiK4hXy/pCMZhHzwSUBsEVkHnRiRLARZQImHegqqIIcFeNGBMX1KryEIsRwnUgqiUb0GEA1/SPD7/BG8FBIkuBGlyyS1wKkd+oMzpM+f9xyFVZgJXXhDdrpBgDIBKehbY8BczEx+hkGbaU4CKAbmCRYGrfqGaG2ck81xxi3m0eML8xT0/vnNH9/x+JSy8weGfaFHQzrnNeFydBpU4pExQa5KJErZ956gk5yGQ9+E9GG/hGFWlUfKOnUcc3BiGOcgKQgZoLIIAKBlCACgFaHrUbQA5qAEAE9QZAAmoaaaR835lGjR+6slZyGy30A5gP4iGA7CBQ+oBOprPbVClUCHRkBlqA3EEg0fAYIoNJZ1AGocAprhBnMnAy0YbDYrH5HPp8ylxKBHBliuGaMXMuHfoIK0QNEwjPE+3tWxQj8UsaHJEJtgFVszVqYh0LvZvsblTWKxeA10Yr9uj11L9Gmckkr5oyIWaA6HL5ewF1NdfIhsdGJIPjaQ9NxFjoQZey1QxT1AwEEAA1KQp3Pl1wRu3nBpwbJetG1H5TcC4fKCSIUkdpKP0YlcjkA59U9y6d8G5f0uslBINBWo9FotEoMRgEO39LjEbhnn9txkLki0FlSil8vQSP9LLPj5JTldq3wki1BkjRilBqpeGi24cIQRIjZdRiZPPf9PRJI3V7eF / WRcdDH7r + INaXaS0PPexMhLDfBBABD / Xmu + tpUuyNF + O1BI4fxJKDJr6FdYryMXTcdw1VhqGUo6p3ztbwakUX05amLtGxP4bCFYyqNQn7wwoP3bKNCu3UKPq7M8iIdvdaY1xYn7t6zQVmnUr7891V0QftCX1e62JiSGvSJFrPUL8w + HQWNApOPEzd / TOF + f1s2374wXptkLZkDVDlY1cltWZjT5j2lMIYVQe65Zvrbur5yj9 + HvtvxvOvVNc4yuvTIVgJ8ugfUvor3Wi4y + jtSzMI7LMEE9 + pd8dB2Y + 1 / y1VLn / 9jIMqKG / qJXCcXfzjR4P8L / nGQDT9Ma + xy / dff + rI477VhCBppeWi + y N + Z / 7EnPvGQzCQR788doDYnQpJ3bVPY5wOT9aaru5RcQ6vOOXaWr5WY9CJXiesm7sEh6TZAbcOLsqhIN6fbva7eSyGprDLgVwnRGVrfF + 2vSL6qDsJzKRiebFyah0oFqtiWUwYHlLKG / sTs6vLg2fE6dU9CTZHkq6RdLWmkkgmq / U0CL4urYKudQvV9bINrd6oEGUPDRkDvcICt6sM4FD / 8Z5hJMLDN2bMevrGyuFwzzYtkroWCeWC0nB5WE6wPCgzQhoqWwXwZHbo9dnfxozGwrM / etc + BZz5wdn6XbbTbjDmN0vBloBSRXCMWXt72zAxt7aQK7LTLa/td0XnwtmO6Pptr7W2QcjbI1yio6Q3jCo0Ahg1EdeC9DA0IdsVrcyszA3iq9RjqzYARxjzcKYBkXbsjPqMKhpnapIqj2k7mBk66a3RcDmzMvP+3GBSbl5zxaM5Y+OTrqLnyVQqQlAlk8cDxODN8iIcw8ftYzYN6bhZOdWy0aov8lH1XhBIf/BkazpxvGYOMfWfozIGPO+qDdHC73gAt4b/HQszBSEuwVG74gpOYZ8/E04DUiFTwcHvA4M2ZRBOff7h/VUcAvfuyEVJvP/CrduWQy5LXbSWGzdBizmQI+qR/8dNIUPROTcnthxAOL+v5a01oVHZHJW+r+//m7u67wmQmzct2hyOP7177xk3cSGS09G5faV1d0/7gsr/3b1rMAiRpDy0XOuDFPhY7WFkupCQ0kxIni46jDgqUzSVh+dtRcZSAvzGUrciZrV/AGln/OnvnBSwyvW672/8vGtjCIhVsZxRkf9qt+s+TWPdVuef8fV6NvWpPet3esCmWcJHAYHDbKUIkWciIlsFSH0EaYtCgYjkmSLkIcczw/4b8xn+Ys9+26UB3JBkvp+K2sGSWStefKBBeAUPQYcoNrLKrD9al/1w0RbRkdV2kccd50XNc1p8zOGI0wZHarNtF4UxyHh4bBF/hi109Uh2XhjrEudgvzXKzp4v4Dp8g7km2/japIL3CvUix1Z8d3/kGgDFY0oqUWSwonfd021CcR1e8WXTQ7JD65EuBbIePX0GWwc1B/eV85u+Splubpmz4SJ0pP1DQ33YWvT6bvYqp60Q7Nk2wLegA6iFr/V8hmrnWFxfs3AtISkCVU390SpCsrIQUT72iV8gAmsokixpLEjyUgrI4saI3wdO7Ce8IcWAVyFjQXlE5vxv + w / eTgHymr3ENJ / 8476YcM Gorh4fOEiUcGszos07EXMC2zWxWUe7n3ugUN Yk9yxFvYP0V7Rj3nfo65ftzTA1Z u4tOGmOeMoVbHSWKylpusD3b 5Icg67y / 9saW42kopy4IVHCVW4unhL5T6MP15vjzfWZuDwdsWQnNw0LEGkaKWPMk6YQ5jG7I1mDBUhyUA3JL6O6LeeZJo / ZjnymD4ephY1NpRxxZZd44rybFkBBCVdcvM7v5XmOf / Fa8aQdeX3hwcI + ZH / 5oKl2 + / + U6os4 2l5HrCfoxgj1pHZ6BbEedIJogQ4kANHi0eqyCno7 L5syuD4V30vnjzvLq7q8pso4Ug4 / IVR / V + E5 / oVrxNPTJSbdLJwPXM9ebLk5jyt18pMpztN5Y67pO2y9upHEivpatX1rFvkn9vapxgke8UX95a kK5R9LeLg5zLCLyj EV8K65tPNGoxYtxDEY3XmTpVKAEVxMcP6ErvkfWWrM UAZYWsoH / PPBtDi8tzypiXlcGz 1XPj6g2uLpHDVTfH7RXHvnbauTC9ecSssG + nsRJTsOZ0d2WgO2tFhMLujM0chRrIyIZp4bZZYQpaJejESnZvZFT4 zGAMj6tOuO1kD3rrvIeQfyI3XRumM4avBrHoPTuchr1Yv2hiYihl15DbDrZsyHvQa / BRZGpyPJsdn9DVJWB9UXyQAT4t STCjCOYrQ1YrK / real mf2JbnCzsT7BwifMdla szmD4dc5uX5M2dYr5xfLl6t1 / Tfrr7Okv3pI8dxXy2bbc9Fn7FRTS psHXf7tYJj1vzXvSmE6WNPc2JoMxpIZdLbjGRPnjG9zCZJP9hT0quztVOv4 / N7ldlhxkvbum29JnYeE38rMLXbPJnF8atQOL1af6rZ / VFHOwCefwdd / UKXpXvRf8P8sAdLZRHwFu4pFinuwzVjtiBJ7iCnTxC1HjWIV9hvWIf4 / VWLIyJ / JxgjgyGDE9aLd4qHcwjzHzOnAnJ / f1Pl4vCe1wCr01xrt / 4oPVpRS0vNfSYB6umsStDXwbIalPBR / y0ltY / zeX4GWIm10E6yHEpRMjuexjlZ4VhfdkRp7 + qQ77PhEYSA + VTOEHflj4jOVcfG5mpnxpdEQY73SBs0wIVKAUbBGig + a4Vh8otFLPA3jj + AR / M3 + 4jOd / itzRIU0vrQqnDpYGRb27lx4ZBEH6GZQPVnO6 + OOMf8dRTLMy + Uvur7RB0UWmrL + H79Bi74MIyGLNkYO3NMI15IBNIZg8qSxj6XE2LSoKv5htOxpXNoxl4eYqCYfgM6cW + kRi18c7fje / x0SEoPxMdv + 5P6GvEBdHzRKdQr2DWlTbduWpUEmtKLcxIFY65ERuJabkGEjBEzh6jTUi0oyx9BkoZKP42nJsn56XOqkxbcjNd0Yqmi6YVr2DfW9HdfzS75LmYj + QCscFLO9ZIqjPXQ2Upo15WI9yKTT6v3Z + / 77bMA + AwYvaJq3P5z5QJ / 5pF1Dggr0Rkl2JeD + Va7YtWqajQKcb7Z2J2Z / VUzHH2 + PQaIVWv2g1VUxS0s = ') format (' woff2 '); } @font - face { font -family: "My-iconfont2" ; // replace words or write my-iconfont src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANQAAsAAAAAB1wAAAMDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCZIJDATYCJAMICwYABCAFhG0HMhtrBhHVm0/IfiZkcpdbFggd199ZS5IhdJp4Jnggva83SDY7s2D2jFQnI3tSx+QgdHQlVD/bHVxS3SIBAsg3N0PXqAjFkpwH/8sy0zXS/AqAg2OmS/E8oDllFCUOcDygAVXUC/+D/IPxD2MXtMTlEIChhoDo0WvACDw0ZjsBiHmzi6fiZWTohmSBh8CtGKoRu3Dw5GaZADuDnxdfaZYHEkdhpg0Je86gy8f5VpiKKqIJnoJ4Og3ARoECAqBBjKjUDUJFvoDCqD5NHWwrWcDH+RUVHm2z/3ggQLiYiRkAVIO0a6I7jEv9SwmABlxgFbB10K3ArZde1fj+8vCAydpy48wx5OGzW88LdfR8w0yi42dvWktUqFJVxGPic8Zgk5uNHLn/0KETp075owzRmS3nhIrPN7RPntU+/vSIDxizZR/Y0fJQua2KMATU0eawJ89OkdGxMzeMOXUuPm/t6TG/4PzWs53r9Pfr/fSHFAxO/hUo51aQ8ps7yZCkpPBfMriwpLmfCm45ywrDW37iNw+be33qhbW69Et7Om7xgH4NBjRvonRG+LtMfjCu34q2tftdXGW/mxbmux0YhoeaO6mmKWcIPdA4b7uMO8XMQgpOJhccGXIruO0Xd0kcMDIJEroAULFaaxX9j9/hh1AfJmd3+O9ZDcDrpuvWIkY3A3hnrRfw9rM0UFGqNWeacqkVHigkWYV7VxkGA1SATXneDxUV3mpI4FF4w4Y0qieg8KiH1NgAHCwtwMWjMxia6j3akm8JCqHTgSbWAxDkuAySLO6BIkcJUmPfgYPvO7jkpMAwSuRPaWkQZkR3wp3xguMP5kxR2koWYfIN1dvvlGYGuBdSNU4Y2j4fXDAiTdGjftTILEFSCjCD1dD7BJmSxZNbzZynrpNVD2rPFBpBd8Kd8YLjD+ZMUXqlWRS+/4bq7XdqKKiSv5CqqRyGtu+AXHixU8GtnFI/amSWICkFmIEGveVLkKsbWTy51QM8eepQMdmV1y4vCG+3DDCYYims+govNB5Xu1PTAAA=') format('woff2'); }
.my-iconfont {
font-family: "my-iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.my-iconfont2 {
font-family: "my-iconfont2" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// .my the JAR-icon-: before { // Content: "\ E618"; // } .my -icon- the JAR: // {before replacement, then it is the first reference set my-iconfont content: "\e76d"; }
.my-icon2-JAR:before {
content: "\e76d";
}
<i class="my-iconfont my-icon-xxx"></i> <i class="my-iconfont2 my-icon2-xxx"></i>
Third, the use of sass or less
Here's an example usage sass, sass written on the application before you can refer to the article, in addition to grammar, other wording unchanged
[class^="my-icon-"],[class*=" my-icon2-"] { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
-end-