Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

How to use custom icons in project sidebar

Holger Schimanski
Holger Schimanski
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
February 27, 2016

I have a JIRA plugin which adds a new tab to the project sidebar in JIRA 7 as defined here via web-item. https://developer.atlassian.com/jiradev/jira-platform/guides/projects/design-guide-jira-project-centric-view/development-guide-jira-project-centric-view

I want to use a custom icon now, so I guess I need to make it available somehow to CSS and define this in param="iconClass". But where and in which image type to put the icon in my plugin and how to define the CSS class for it?

Any ideas how to do that?

 

Best regards

Holger

Watch
Like Be the first to like this
1877 views

1 answer

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

4 votes
Answer accepted
Daniel Wester
Daniel Wester
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
February 29, 2016

You need to create a <web-resource/> in your atlassian-plugin.xml and have it serve a single css file that has the background property on the class name that you've created and then use the jira.project.sidebar context on the web-resource.

View More Comments
Holger Schimanski
Holger Schimanski
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
March 3, 2016

Great, works fine!

Here is my atlassian-plugin.xml

&lt;web-resource ...&gt;
  &lt;resource type="download" name="versionmanager.css" location="/versionmanager/versionmanager.css"/&gt;
  &lt;resource type="download" name="version_edit.svg" location="/images/version_edit.svg"/&gt;
  ...
&lt;/web-resource&gt;

And my css file

.version-manager-icon {
 background-image: url("version_edit.svg");    
}

And web-item in atlassian-plugin.xml

&lt;web-item ...&gt;
  &lt;param name="iconClass" value="aui-icon-large version-manager-icon"/&gt;
  ...
&lt;/web-item&gt;
Like
Michiel Roos
Michiel Roos December 7, 2016

Take care to add a content-type parameter on the resource. If you don't, the image will be served as octet-stream.

&lt;web-resource key="bitbucket.repository.nav.resources" name="Repository navigation resources"&gt;
  &lt;resource type="download" name="repository.css" location="/css/repository.css"/&gt;
  &lt;resource type="download" name="icon.svg" location="/images/icon.svg"&gt;
    &lt;param name="content-type" value="image/svg+xml"/&gt;
  &lt;/resource&gt;
  &lt;context&gt;atl.general&lt;/context&gt;
&lt;/web-resource&gt;
Like
Reply
Atlassian logo
Answers Developer Questions
TAGS
AUG Leaders

Atlassian Community Events

    See all events