在CSS中使用字体真棒图标

11 回答

• 2

  实际上甚至 font-awesome CSS也有类似的策略来设置他们的图标样式 . 如果你想快速掌握 icon code ，请检查non-minified font-awesome.css文件，它们是......纯度中的每种字体 .

  

  回复于 2024-05-02T20:51:27+08:00
• 429

  巩固以上所有内容，以下是最后一个运作良好的课程

  .faArrowIcon {
          position:relative;
      }
  
      .faArrowIcon:before {
          font-family: FontAwesome;
          top:0;
          left:-5px;
          padding-right:10px;
          content: "\f0a9"; 
      }
  

  回复于 2024-05-02T20:51:27+08:00
• 0

  您可以尝试此示例类 . 并在此处查找图标内容：http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transform: translate(0, 0);
      content: "\f007";
      }
  

  回复于 2024-05-02T20:51:27+08:00
• 19

  您不能将文本用作背景图像，但您可以使用 :before 或 :after 伪类将文本字符放在您想要的位置，而无需添加各种杂乱的额外标记 .

  请务必在实际文本包装器上设置 position:relative 以使定位生效 .

  .mytextwithicon {
      position:relative;
  }    
  .mytextwithicon:before {
      content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
      font-family: FontAwesome;
      left:-5px;
      position:absolute;
      top:0;
   }
  

  EDIT:

  Font Awesome v5使用其他字体名称而不是旧版本：

  • For FontAwesome v5，免费版，使用： font-family: "Font Awesome 5 Free"

  • 对于FontAwesome v5，专业版，请使用： font-family: "Font Awesome 5 Pro"

  请注意，您也应该设置相同的 font-weight 属性（似乎是900） .

  查找字体名称的另一种方法是右键单击页面上的示例字体awesome图标并获取字体名称（同样可以找到utf-8图标代码，但请注意，您可以在 :before 上找到它） .

  回复于 2024-05-02T20:51:27+08:00
• 4

  除了上面Diodeus的答案之外，还需要 font-family: FontAwesome 规则（假设您已经在CSS中声明了FontAwesome的 @font-face 规则） . 然后，知道哪个CSS内容值对应于哪个图标 .

  我在这里列出了所有这些：http://astronautweb.co/snippet/font-awesome/

  回复于 2024-05-02T20:51:27+08:00
• 1

  无需将内容嵌入CSS . 您可以将徽章内容放在fa元素中，然后调整徽章css . http://jsfiddle.net/vmjwayrk/2/

  <i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
    <span style="
          background-color: navy;
          border-radius: 50%;
          font-size: .25em;
          display:block;
          position:absolute;
          text-align: center;
          line-height: 2em;
          top: -.5em;
          right: -.5em;
          width: 2em;
          height: 2em;
          border:solid 4px #fff;
          box-shadow:0px 0px 1px #000;
          color: #fff;
      ">17</span>
  </i>
  

  回复于 2024-05-02T20:51:27+08:00
• 16

  或者，如果使用Sass，可以“扩展”FA图标以显示它们：

  .mytextwithicon:before {
    @extend .fas, .fa-angle-double-right;
  
    @extend .mr-2; // using bootstrap to add a small gap
                   // between the icon and the text.
  }
  

  回复于 2024-05-02T20:51:27+08:00
• 1

  要使用css使用字体真棒，请按照以下步骤操作 -

  步骤1 - 在CSS中添加FontAwesome的字体

  /*Font Awesome Fonts*/
  @font-face {
      font-family: 'FontAwesome';
      //in url add your folder path of FontAwsome Fonts
      src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
  }
  

  步骤2使用下面的css在HTML的class元素上应用字体

  .sorting_asc:after {
      content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
      font-family: FontAwesome;
      padding-left: 10px !important;
      vertical-align: middle;
  }
  

  最后，使用“ sorting_asc ”类将css应用于所需的HTML标记/元素 .

  回复于 2024-05-02T20:51:27+08:00
• 0

  #content h2:before {
      content: "\f055";
      font-family: FontAwesome;
      left:0;
      position:absolute;
      top:0;
  }
  

  示例链接：https://codepen.io/bungeedesign/pen/XqeLQg

  获取图标代码：https://fontawesome.com/cheatsheet?from=io

  回复于 2024-05-02T20:51:27+08:00
• 1

  通过命令行使用以下Python程序从Font-Awesome图标创建png图像：

  https://github.com/Pythonity/font-awesome-to-png

  回复于 2024-05-02T20:51:27+08:00
• 66

  为此，您只需要通过以下方式将 content 属性和 font-family 属性添加到所需元素：before或：after .

  例如：我想在帖子中的所有 a 元素后附加一个附件图标 . 所以，首先我需要搜索fontawesome中是否存在这样的图标 . 就像我发现它的情况here，即 fa fa-paperclip . 然后我会右键单击那里的图标，然后转到 ::before 伪属性来获取它正在使用的 content 标签，在我的情况下，我发现它是 \f0c6 . 然后我会在我的css中使用它：

  .post a:after {
       font-family: FontAwesome,
       content: " \f0c6" /* I added a space before \ for better UI */
      }
  

  回复于 2024-05-02T20:51:27+08:00