Title: Devicons Author: Ryder Damen Published: 2018 年 3 月 21 日 Last modified: 2018 年 3 月 21 日 --- 搜索插件 ![](https://ps.w.org/devicons/assets/banner-772x250.png?rev=1843880) **该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起 使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。 ![](https://ps.w.org/devicons/assets/icon-256x256.png?rev=1843880) # Devicons 作者：[Ryder Damen](https://profiles.wordpress.org/ryderdamen/) [下载](https://downloads.wordpress.org/plugin/devicons.zip) * [详情](https://cn.wordpress.org/plugins/devicons/#description) * [评价](https://cn.wordpress.org/plugins/devicons/#reviews) * [安装](https://cn.wordpress.org/plugins/devicons/#installation) * [开发进展](https://cn.wordpress.org/plugins/devicons/#developers) [支持](https://wordpress.org/support/plugin/devicons/) ## 描述 Devicons is a plugin that allows you to easily display Devicons (Software and Web Developer icons) on your WordPress site. Show off your skills by including them in a graphical way. This plugin is based on the [Devicon project by Julien Monty](http://konpa.github.io/devicon/). ## 屏幕截图 [⌊A screenshot showing a full list of rendered, coloured devicons without titles.⌉⌊ A screenshot showing a full list of rendered, coloured devicons without titles.⌉[ A screenshot showing a full list of rendered, coloured devicons without titles. [⌊A screenshot showing devicons with titles, of a specific colour.⌉⌊A screenshot showing devicons with titles, of a specific colour.⌉[ A screenshot showing devicons with titles, of a specific colour. ## 安装 #### Using The WordPress Dashboard 1. Navigate to the ‘Add New’ in the plugins dashboard 2. Search for ‘Devicons’ 3. Click ‘Install Now’ 4. Activate the plugin on the Plugin dashboard ## 常见问题 Installation Instructions #### Using The WordPress Dashboard 1. Navigate to the ‘Add New’ in the plugins dashboard 2. Search for ‘Devicons’ 3. Click ‘Install Now’ 4. Activate the plugin on the Plugin dashboard How do I display one devicon? You can show one devicon as an inline style by using the shortcode `[devicon icon ="wordpress"]` in a page or a post. This will return the colour, non-title version of that icon inline. This means it’s returned in the html tag you put it in. If you wrap the shortcode in a h1 tag, it will return with the same font-size as your h1 (page titles), or the same with a regular p (paragraph) tag. How do I display multiple devicons? You can display multiple devicons either by stringing together the above ‘devicon’ shortcode, or by using the following shortcode: ``` [devicons] wordpress facebook illustrator [/devicons] ``` Simply list the ones you want within the shortcode, (separated by a space, comma, or enter key) and the plugin will display them for you. These once again default to colour without titles, but are not displayed inline. These instead are displayed as 50px size icons, giving you a better way to showcase a bunch of skills for a particular project. How do I display icon titles (wordmarks)? If you hover over an icon, it will always return the title of that icon for web accessibility purposes. You can however show the title right on the icon if you like. This is available for most (but not all) icons, but the plugin will simply return the non-titled version if it’s not available. To show titles, simply add the title=”true” parameter to the shortcode. Here are a few examples: When requesting a single devicon with a title: ``` [devicon icon="wordpress" title="true"] ``` When requesting multiple devicons with titles: ``` [devicons title="true"] wordpress docker [/devicons] ``` How do I set a custom colour? Icon colours can be customized with the color=”#cc0000″ (American spelling) tag. You can input any CSS-valid colour here, but most people will just put in a hex code like #cc0000. Here are a few examples: When requesting a single devicon with the colour #cc0000: ``` [devicon icon="wordpress" color="#cc0000"] ``` When requesting multiple devicons with the colour #cc0000: ``` [devicons color="#cc0000"] wordpress docker [/devicons] ``` ## 评价 ![](https://secure.gravatar.com/avatar/e8d3cd1c4e28bcfb97f114ac51edfe0b4bea5be343cdc3485367e822d349c9bc? s=60&d=retro&r=g) ### 󠀁[Great!](https://wordpress.org/support/topic/doesnt-work-and-i-wish-it-did/)󠁿 [yanike](https://profiles.wordpress.org/yanike/) 2018 年 11 月 27 日 I found this to work using code like this [devicon icon=""] . Using the [devicon icon=""] to activate the plugin and insert HTML tags after. Picked the icons from http://konpa.github.io/devicon/. You can see this plugin working on my site at http://yeoworks.tk/index.php/experience/ [ 阅读所有1条评价 ](https://wordpress.org/support/plugin/devicons/reviews/) ## 贡献者及开发者 「Devicons」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ Ryder Damen ](https://profiles.wordpress.org/ryderdamen/) [帮助将「Devicons」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/devicons) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/devicons/)，查看[SVN仓库](https://plugins.svn.wordpress.org/devicons/)， 或通过[RSS](https://plugins.trac.wordpress.org/log/devicons/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/devicons/)。 ## 更新日志 #### 1.0 * The first release. ## 额外信息 * 版本 **1.0** * 最后更新：**8 年前** * 活跃安装数量 **10+** * WordPress 版本 ** 3.5.1 或更高版本 ** * 已测试的最高版本为 **4.9.29** * PHP 版本 ** 5.6 或更高版本 ** * 语言 * [English (US)](https://wordpress.org/plugins/devicons/) * [高级视图](https://cn.wordpress.org/plugins/devicons/advanced/) ## 评级 5 星（最高 5 星）。 * [ 1 条 5 星评价 ](https://wordpress.org/support/plugin/devicons/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/devicons/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/devicons/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/devicons/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/devicons/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/devicons/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/devicons/reviews/) ## 贡献者 * [ Ryder Damen ](https://profiles.wordpress.org/ryderdamen/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/devicons/) ## 捐助 您愿意支持这个插件的发展吗? [ 捐助此插件 ](https://ryderdamen.com/buy-me-a-beer)