5

如何用 CSS 自定义使用 Font Awesome 图标 | news view

 3 years ago
source link: https://zsqk.github.io/news/2020-05-09-font-awesome-in-css.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

news view

最近想在 CSS ::after 中直接使用 Font Awesome 图标.

我们可以直接看代码了解如何去使用, 也可以通过 Font Awesome 官方的文章.

具体实现就是:

.need-after::after {
  font-family: "Font Awesome 5 Free";
  content: "\f007";
}

其中 content 的值可以直接在 gallery 中找到.

附: CSS 的编码

这里顺便说一下 CSS 的编码.

对于一些编程语言来说, 比如 a 会使用 \u0061 这样编码, 其中 u 代表 Unicode.

但 CSS 没有, 虽然编码方式也是 UTF, 但储存方式是固定的 6 个 hex, 比 UTF-32 少了两个储存位置. 比如 a 在 CSS 中可以写为 \000061.

- css

- font-awesome

This site is open source. Improve this page.

Recommend

  • 21
    • www.woshipm.com 4 years ago
    • Cache

    在Axure 9.0 上使用Font Awesome

    编辑导语:如何在 Axure 9.0 上使用 Font Awesome呢?本文作者通过实际操作,分享出了具体的流程,并且为我们进行了分析和总结。

  • 10
    • marco.dev 4 years ago
    • Cache

    Use Font Awesome with Angular

    java-version.com: What's new in Java 16? 15? Keep up to date! Use Font Awesome with Angular Install the Font Awes...

  • 12
    • chrispenner.ca 4 years ago
    • Cache

    Gem: Font-Awesome

    Gem: Font-Awesome by Chris Penner...

  • 14

    When Font Awesome Won't Render in Production on Rails 5.x Aug 12, 2017 Font Awesome is one of those staggeringly good open source projects that you don't realize just how g...

  • 6

    When Your Font Awesome Etsy Icon Doesn't Display Mar 16, 2017 I'm a fan of Font Awesome and I think enough of it that it was actually the first bit of soft...

  • 9

    Rails Tutorial - Making Font Awesome Work with Rails 5 Jan 24, 2017 Like a lot of back end folks I suspect I'm not alone when I look at a project like Font Awesome and go "Great Work; damn if I know how to act...

  • 9
    • blog.hhking.cn 4 years ago
    • Cache

    Awesome Font-end

    Awesome Font-end前端实用备忘录 138 | Posted by hhking on 2018-12-03前端的发展日新月异,新的技术、新的工具如雨后春笋,不断的冒出来。作为前端,身处于大前端的繁荣时...

  • 3
    • www.geeksforgeeks.org 3 years ago
    • Cache

    How to load font-awesome using SCSS ?

    How to load font-awesome using SCSS ?How to load font-awesome using SCSS ?In order to load font-awesome icons in SCSS you need to follow these steps:Install Font-Awesome starter kit: Go to the font-awes...

  • 8
    • www.codesd.com 3 years ago
    • Cache

    Using Awesome Font with Gumby Framework

    Using Awesome Font with Gumby Framework advertisements Is there a way to use the FontAwesome icons in the Gumby...

  • 3
    • dev.to 3 years ago
    • Cache

    Font Awesome- Explained

    Font Awesome- Explained user experience is null without icons. In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system. The icon itself...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK