• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > WP主题开发21:wordpress主题怎样调用dashicons字体小图标?

    WP主题开发21:wordpress主题怎样调用dashicons字体小图标?

    作者: 分类:wordpress CMS主题制作 点击: 261 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      通过前面的20章节,我们完成了wordpress主题trans的开发制作。但是,我们在trans主题的前台页面中,还有一个小细节没有处理,就是前台页面的dashicons字体小图标的调用(如下图)。在wordpress3.8版本前,我们想要在wordpress主题中使用达到dashicons字体小图标的效果,要么使用调用网络字体资源,要么通过图片的形式来实现。wordpress3.8版本以后,就内置了dashicons字体图标的功能,我们只需在wordpress主题开发时,直接调用就可以了。

      WP主题开发21:wordpress主题怎样调用dashicons字体小图标?

      那么,怎样在wordpress主题中调用dashicons字体小图标呢?

      一、调用wordpress自带的dashicons字体样式文件。

      wordpress自带的dashicons的样式文件在\wp-includes\css目录下,所以,我们要在前台页面< head>头部代码的wordpress主题样式文件style.css的前面插件如下代码:

      <link rel="stylesheet" href="<?php bloginfo("wpurl"); ?>/wp-includes/css/dashicons.css">

      一定要把这个调用代码放在style.css调用的前面(如下图),反之,dashicons.css会有可能影响到style.css样式的实现。

      WP主题开发21:wordpress主题怎样调用dashicons字体小图标?

      二、在wordpress主题前台页面调用dashicons字体小图标。

      在wordpress主题的代码中调用dashicons字体小图标,都是通过dashicons.css提供的元素class类来实现的,可以通过以下2种方式来实现。

      方法1:当前标签元素自己添加dashicons的class类。

      这种方法,必须使用dashicons-before这个class类,意思是“在当前元素前面使用dashicons字体小图标,然后,再添加一个dashicons小图标类。如:

      <p class="dashicons-before dashicons-visibility">眼睛</p>

      这里,我先添加dashicons-before类,再添加了一个眼睛的图标类dashicons-visibility,一般用于页面浏览量。

      方法2:当前元素内部添加子元素,给子元素添加dashicons类。

      也就是在当前元素的内容前面添加一个子元素,然后台给这个子元素调用dashicons字体小图标。如:

      <p><span class="dashicons dashicons-smiley"></span>笑脸</p>

      这里,dashicons是dashicons小图标的全局样式,dashicons-smiley是笑脸小图标类,页面会显示一个笑脸。

      三、手动修改dashicons字体小图标的样式。

      有时候,我们可能有不同的需求,想让这些dashicons小图标变大一点,或者改变一下它们的颜色。怎样么修改呢?其实很简单,因为这些dashicons是字体,不是图片,所以,我们可以像修改字体样式一样,来修改这些dashicons小图标的样式。当然,是在我们自己创建的style.css样式文件中修改,而不是去修改dashicons.css文件,这就是为什么在< head>中要把dashicons.css调用放在前面的原因。如:

      .dashicons-smiley{ color:red; font-size:20px; }

      上句,就是把笑脸小图标的颜色改成了红色,大小改成了20像素。

      四、dashicons字体小图标大全。

      为了方便大家在wordpress主题开发中使用dashicons字体小图标,这里,我们把dashicons提供的所有字体小图标的class类及样子展示给大家。

      dashicons图标大全

      WP图标CSS路径
      WP图标CSS路径 /wp-includes/css/dashicons.css
      Admin Menu Icons
      dashicons-menu dashicons-admin-site
      dashicons-dashboard dashicons-admin-media
      dashicons-admin-page dashicons-admin-comments
      dashicons-admin-appearance dashicons-admin-plugins
      dashicons-admin-users dashicons-admin-tools
      dashicons-admin-settings dashicons-admin-network
      dashicons-admin-generic dashicons-admin-home
      dashicons-admin-collapse dashicons-filter
      dashicons-admin-customizer dashicons-admin-multisite
      Both Admin Menu and Post Formats
      dashicons-admin-links dashicons-format-links
      dashicons-admin-post dashicons-format-standard
      Post Format Icons
      dashicons-format-image dashicons-format-gallery
      dashicons-format-audio dashicons-format-video
      dashicons-format-chat dashicons-format-status
      dashicons-format-aside dashicons-format-quote
      Welcome Screen Icons
      dashicons-welcome-write-blog dashicons-welcome-edit-page
      dashicons-welcome-add-page dashicons-welcome-view-site
      dashicons-welcome-widgets-menus dashicons-welcome-comments
      dashicons-welcome-learn-more
      Image Editing Icons
      dashicons-image-crop dashicons-image-rotate
      dashicons-image-rotate-left dashicons-image-rotate-right
      dashicons-image-flip-vertical dashicons-image-flip-horizontal
      dashicons-image-filter
      Both Image Editing and TinyMCE
      dashicons-undo dashicons-redo
      TinyMCE Icons
      dashicons-editor-bold dashicons-editor-italic
      dashicons-editor-ul dashicons-editor-ol
      dashicons-editor-quote dashicons-editor-alignleft
      dashicons-editor-aligncenter dashicons-editor-alignright
      dashicons-editor-insertmore dashicons-editor-spellcheck
      dashicons-editor-distractionfree dashicons-editor-expand
      dashicons-editor-contract dashicons-editor-kitchensink
      dashicons-editor-underline dashicons-editor-justify
      dashicons-editor-textcolor dashicons-editor-paste-word
      dashicons-editor-paste-text dashicons-editor-removeformatting
      dashicons-editor-video dashicons-editor-customchar
      dashicons-editor-outdent dashicons-editor-indent
      dashicons-editor-help dashicons-editor-strikethrough
      dashicons-editor-unlink dashicons-editor-rtl
      dashicons-editor-break dashicons-editor-code
      dashicons-editor-paragraph dashicons-editor-table
      Post Icons
      dashicons-align-left dashicons-align-right
      dashicons-align-center dashicons-align-none
      dashicons-lock dashicons-unlock
      dashicons-calendar dashicons-calendar-alt
      dashicons-visibility dashicons-hidden
      dashicons-post-status dashicons-edit
      dashicons-post-trash dashicons-trash
      dashicons-sticky
      Sorting
      dashicons-external dashicons-arrow-up
      dashicons-arrow-down dashicons-arrow-left
      dashicons-arrow-right dashicons-arrow-up-alt
      dashicons-arrow-down-alt dashicons-arrow-left-alt
      dashicons-arrow-right-alt dashicons-arrow-up-alt2
      dashicons-arrow-down-alt2 dashicons-arrow-right-alt2
      dashicons-leftright dashicons-sort
      dashicons-randomize dashicons-list-view
      dashicons-exerpt-view dashicons-excerpt-view
      dashicons-grid-view dashicons-move
      WPorg specific icons: Jobs, Profiles, WordCamps
      dashicons-hammer dashicons-art
      dashicons-migrate dashicons-performance
      dashicons-universal-access dashicons-universal-access-alt
      dashicons-tickets dashicons-nametag
      dashicons-clipboard dashicons-heart
      dashicons-megaphone dashicons-schedule
      Internal/Products
      dashicons-wordpress dashicons-wordpress-alt
      dashicons-pressthis dashicons-update
      dashicons-screenoptions dashicons-cart
      dashicons-feedback dashicons-cloud
      dashicons-translation
      Taxonomies
      dashicons-tag dashicons-category
      Widget icons
      dashicons-archive dashicons-tagcloud
      dashicons-text
      Media icons
      dashicons-media-archive dashicons-media-audio
      dashicons-media-code dashicons-media-default
      dashicons-media-document
      dashicons-media-interactive dashicons-media-spreadsheet
      dashicons-media-text dashicons-media-video
      dashicons-playlist-audio dashicons-playlist-video
      dashicons-controls-play dashicons-controls-pause
      dashicons-controls-forward dashicons-controls-skipforward
      dashicons-controls-back dashicons-controls-skipback
      dashicons-controls-repeat dashicons-controls-volumeon
      dashicons-controls-volumeoff
      Alerts/Notifications/Flags
      dashicons-yes dashicons-no
      dashicons-no-alt dashicons-plus
      dashicons-plus-alt dashicons-plus-alt2
      dashicons-minus dashicons-dismiss
      dashicons-marker dashicons-star-filled
      dashicons-star-half dashicons-star-empty
      dashicons-flag dashicons-info
      dashicons-warning
      Social Icons
      dashicons-share dashicons-share1
      dashicons-share-alt dashicons-share-alt2
      dashicons-twitter dashicons-rss
      dashicons-email dashicons-email-alt
      dashicons-facebook dashicons-facebook-alt
      dashicons-networking dashicons-googleplus
      Misc/CPT
      dashicons-location dashicons-location-alt
      dashicons-camera dashicons-images-alt
      dashicons-images-alt2 dashicons-video-alt
      dashicons-video-alt2 dashicons-video-alt3
      dashicons-vault dashicons-shield
      dashicons-shield-alt dashicons-sos
      dashicons-search dashicons-slides
      dashicons-analytics dashicons-chart-pie
      dashicons-chart-bar dashicons-chart-line
      dashicons-chart-area dashicons-groups
      dashicons-businessman dashicons-id
      dashicons-id-alt dashicons-products
      dashicons-awards dashicons-forms
      dashicons-testimonial dashicons-portfolio
      dashicons-book dashicons-book-alt
      dashicons-download dashicons-upload
      dashicons-backup dashicons-clock
      dashicons-lightbulb dashicons-microphone
      dashicons-desktop dashicons-laptop
      dashicons-tablet dashicons-smartphone
      dashicons-phone dashicons-smiley
      dashicons-index-card dashicons-carrot
      dashicons-building dashicons-store
      dashicons-album dashicons-palmtree
      dashicons-tickets-alt dashicons-money
      dashicons-thumbs-up dashicons-thumbs-down
      dashicons-layout dashicons-paperclip


      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:码不停蹄
    本文地址:http://wanlimm.com/77202006308789.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.